@pythia-software/query-table-ui 0.4.2 → 0.6.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 CHANGED
@@ -1,4 +1,4 @@
1
- /* src/theme.css */
1
+ /* src/baseTheme.css */
2
2
  :root {
3
3
  --qt-font-size: 14px;
4
4
  --qt-border: #d0d7de;
@@ -57,6 +57,11 @@
57
57
  padding: 0 8px;
58
58
  font-size: 11px;
59
59
  }
60
+ .qt-icon {
61
+ display: inline-block;
62
+ flex-shrink: 0;
63
+ vertical-align: -0.125em;
64
+ }
60
65
  .qt-btn,
61
66
  .qt-add,
62
67
  .qt-link-btn {
@@ -72,6 +77,7 @@
72
77
  box-sizing: border-box;
73
78
  display: inline-flex;
74
79
  align-items: center;
80
+ gap: 4px;
75
81
  }
76
82
  .qt-btn:hover:not(:disabled),
77
83
  .qt-add:hover:not(:disabled) {
@@ -101,6 +107,39 @@
101
107
  color: var(--qt-accent);
102
108
  border-style: dashed;
103
109
  }
110
+ .qt-add > .qt-icon[data-icon=add] {
111
+ width: 12px;
112
+ height: 12px;
113
+ }
114
+ .qt-split-btn {
115
+ display: inline-flex;
116
+ align-items: stretch;
117
+ height: 24px;
118
+ box-sizing: border-box;
119
+ border: 1px dashed var(--qt-border);
120
+ border-radius: var(--qt-radius);
121
+ }
122
+ .qt-split-btn:has(button:hover:not(:disabled)) {
123
+ border-color: var(--qt-accent);
124
+ }
125
+ .qt-qb .qt-split-btn > .qt-add {
126
+ height: 100%;
127
+ min-height: 0;
128
+ min-width: 0;
129
+ border: 0;
130
+ padding: 0 6px;
131
+ border-radius: 0;
132
+ }
133
+ .qt-qb .qt-split-btn > .qt-add:first-child {
134
+ border-radius: var(--qt-radius) 0 0 var(--qt-radius);
135
+ }
136
+ .qt-qb .qt-split-btn > .qt-split-btn-caret {
137
+ justify-content: center;
138
+ width: 24px;
139
+ padding: 0;
140
+ border-left: 1px solid var(--qt-border);
141
+ border-radius: 0 var(--qt-radius) var(--qt-radius) 0;
142
+ }
104
143
  .qt-link-btn {
105
144
  border: 0;
106
145
  background: transparent;
@@ -184,6 +223,9 @@
184
223
  color: var(--qt-accent);
185
224
  }
186
225
  .qt-sort-indicator {
226
+ display: inline-flex;
227
+ align-items: center;
228
+ margin-left: 3px;
187
229
  color: var(--qt-accent);
188
230
  }
189
231
  .qt-sort-priority {
@@ -362,10 +404,25 @@
362
404
  flex-wrap: wrap;
363
405
  gap: 6px;
364
406
  }
407
+ .qt-qb-section-header {
408
+ display: contents;
409
+ }
365
410
  .qt-qb-body {
366
411
  display: flex;
367
412
  flex-direction: column;
368
- gap: 8px;
413
+ gap: 0;
414
+ }
415
+ .qt-qb-body > .qt-qb-row {
416
+ padding: 10px 0;
417
+ }
418
+ .qt-qb-body > .qt-qb-row + .qt-qb-row {
419
+ border-top: 1px solid var(--qt-border);
420
+ }
421
+ .qt-qb-body > .qt-qb-row:first-child {
422
+ padding-top: 0;
423
+ }
424
+ .qt-qb-body > .qt-qb-row:last-child {
425
+ padding-bottom: 0;
369
426
  }
370
427
  .qt-qb-bar {
371
428
  border: 1px solid var(--qt-border);
@@ -409,7 +466,6 @@
409
466
  display: inline-flex;
410
467
  flex-direction: column;
411
468
  gap: 6px;
412
- min-width: 92px;
413
469
  }
414
470
  .qt-qb-editor-stack .qt-btn {
415
471
  width: 100%;
@@ -446,10 +502,10 @@
446
502
  position: absolute;
447
503
  top: 50%;
448
504
  transform: translateY(-50%);
449
- left: -20px;
450
- width: 20px;
451
- height: 26px;
452
- min-width: 20px;
505
+ left: -28px;
506
+ width: 28px;
507
+ height: 32px;
508
+ min-width: 28px;
453
509
  padding: 0;
454
510
  justify-content: center;
455
511
  border-right: 0;
@@ -462,7 +518,9 @@
462
518
  line-height: 1;
463
519
  transition: transform 0.12s ease;
464
520
  transform: rotate(0deg);
465
- font-size: 13px;
521
+ width: 18px;
522
+ height: 18px;
523
+ flex-shrink: 0;
466
524
  }
467
525
  .qt-qb-collapse-caret--collapsed {
468
526
  transform: rotate(-90deg);
@@ -501,7 +559,49 @@
501
559
  padding: 2px 6px;
502
560
  }
503
561
  .qt-qb-window-field {
504
- display: contents;
562
+ display: inline-flex;
563
+ align-items: center;
564
+ gap: 6px;
565
+ }
566
+ .qt-qb-window-field + .qt-qb-window-field {
567
+ border-left: 1px solid var(--qt-border);
568
+ margin-left: 18px;
569
+ padding-left: 18px;
570
+ }
571
+ .qt-qb-num-combo {
572
+ display: inline-flex;
573
+ align-items: stretch;
574
+ }
575
+ .qt-qb-num-combo > .qt-qb-num {
576
+ border-top-right-radius: 0;
577
+ border-bottom-right-radius: 0;
578
+ }
579
+ .qt-qb-num-step {
580
+ font: inherit;
581
+ font-size: 12px;
582
+ font-variant-numeric: tabular-nums;
583
+ white-space: nowrap;
584
+ cursor: pointer;
585
+ color: var(--qt-accent);
586
+ background: #fff;
587
+ border: 1px solid var(--qt-border);
588
+ border-left: 0;
589
+ border-radius: 0;
590
+ padding: 0 6px;
591
+ }
592
+ .qt-qb-num-step:last-child {
593
+ border-radius: 0 var(--qt-radius) var(--qt-radius) 0;
594
+ }
595
+ .qt-qb-num-step:hover:not(:disabled) {
596
+ background: var(--qt-accent-bg);
597
+ }
598
+ .qt-qb-num-step:disabled {
599
+ opacity: 0.45;
600
+ cursor: default;
601
+ }
602
+ .qt-qb-num-step:focus-visible {
603
+ outline: 2px solid var(--qt-accent);
604
+ outline-offset: 2px;
505
605
  }
506
606
  .qt-qb-saved {
507
607
  display: inline-flex;
@@ -509,6 +609,9 @@
509
609
  gap: 4px;
510
610
  }
511
611
  .qt-qb-saved-star {
612
+ display: inline-flex;
613
+ align-items: center;
614
+ justify-content: center;
512
615
  border: 0;
513
616
  background: transparent;
514
617
  padding: 0;
@@ -543,6 +646,9 @@
543
646
  font-weight: 400;
544
647
  }
545
648
  .qt-qb-saved-cancel {
649
+ display: inline-flex;
650
+ align-items: center;
651
+ justify-content: center;
546
652
  border: 0;
547
653
  background: transparent;
548
654
  padding: 0;
@@ -648,8 +754,16 @@
648
754
  opacity: 0.5;
649
755
  }
650
756
  .qt-chip-grip {
651
- color: var(--qt-border);
757
+ display: inline-flex;
758
+ align-items: center;
759
+ color: var(--qt-muted);
652
760
  user-select: none;
761
+ margin-left: -3px;
762
+ margin-right: -2px;
763
+ }
764
+ .qt-chip-grip > .qt-icon {
765
+ width: 12px;
766
+ height: 16px;
653
767
  }
654
768
  .qt-chip-priority {
655
769
  background: var(--qt-accent);
@@ -689,12 +803,116 @@
689
803
  align-items: center;
690
804
  gap: 4px;
691
805
  }
692
- .qt-sort-extract {
693
- display: inline-flex;
694
- align-items: center;
695
- gap: 4px;
806
+ .qt-sort-extract-editor {
807
+ display: flex;
808
+ flex-direction: column;
809
+ width: min(760px, 94vw);
810
+ max-height: 90vh;
811
+ overflow: hidden;
812
+ background: var(--qt-bg, #fff);
813
+ color: var(--qt-text);
814
+ border-radius: 12px;
815
+ box-shadow: 0 24px 80px #0004;
816
+ }
817
+ .qt-sort-extract-editor .qt-overlay-header {
818
+ padding: 12px 16px;
819
+ border-bottom: 1px solid var(--qt-border);
820
+ }
821
+ .qt-sort-extract-label {
822
+ display: block;
823
+ font-size: 12px;
824
+ font-weight: 600;
825
+ margin-bottom: 4px;
826
+ }
827
+ .qt-sort-extract-input,
828
+ .qt-sort-extract-field {
829
+ display: block;
830
+ width: 100%;
831
+ height: 32px;
832
+ box-sizing: border-box;
833
+ padding: 0 8px;
834
+ font: inherit;
835
+ font-size: 13px;
836
+ color: var(--qt-text);
837
+ background: var(--qt-bg, #fff);
838
+ border: 1px solid var(--qt-border);
839
+ border-radius: var(--qt-radius);
840
+ }
841
+ .qt-sort-extract-input {
842
+ font-family: monospace;
843
+ }
844
+ .qt-sort-extract-field {
845
+ margin-bottom: 12px;
846
+ }
847
+ .qt-sort-extract-input:focus-visible,
848
+ .qt-sort-extract-field:focus-visible {
849
+ outline: 2px solid var(--qt-accent);
850
+ outline-offset: -1px;
851
+ border-color: var(--qt-accent);
852
+ }
853
+ .qt-sort-extract-help,
854
+ .qt-sort-extract-status {
855
+ color: var(--qt-muted);
856
+ font-size: 12px;
857
+ line-height: 1.5;
858
+ margin: 8px 0;
859
+ }
860
+ .qt-sort-extract-error {
861
+ color: var(--qt-fail-fg);
862
+ font-size: 12px;
863
+ }
864
+ .qt-sort-extract-table-wrap {
865
+ overflow: auto;
866
+ max-height: 360px;
867
+ border: 1px solid var(--qt-border);
868
+ border-radius: var(--qt-radius);
869
+ }
870
+ .qt-sort-extract-table {
871
+ width: 100%;
872
+ border-collapse: collapse;
873
+ font-size: 12px;
874
+ table-layout: fixed;
875
+ }
876
+ .qt-sort-extract-table caption {
877
+ text-align: left;
878
+ font-weight: 600;
879
+ padding: 8px;
880
+ }
881
+ .qt-sort-extract-table th,
882
+ .qt-sort-extract-table td {
883
+ text-align: left;
884
+ padding: 6px 8px;
885
+ border-top: 1px solid var(--qt-border);
886
+ overflow-wrap: anywhere;
887
+ }
888
+ .qt-sort-extract-table th {
889
+ background: var(--qt-header-bg);
890
+ }
891
+ .qt-sort-extract-table th:last-child,
892
+ .qt-sort-extract-table td:last-child {
893
+ width: 52px;
894
+ text-align: right;
895
+ font-variant-numeric: tabular-nums;
896
+ }
897
+ .qt-sort-extract-table small {
898
+ display: block;
899
+ color: var(--qt-muted);
900
+ margin-top: 2px;
901
+ }
902
+ .qt-sort-extract-footer {
903
+ display: flex;
904
+ flex-shrink: 0;
905
+ flex-wrap: wrap;
906
+ justify-content: flex-end;
907
+ gap: 6px;
908
+ padding: 10px 16px;
909
+ border-top: 1px solid var(--qt-border);
910
+ }
911
+ .qt-sort-extract-footer > .qt-link-btn {
912
+ margin-right: auto;
696
913
  }
697
- .qt-chip-and {
914
+ .qt-chip-and,
915
+ .qt-chip-agg-kw {
698
916
  color: var(--qt-muted);
699
917
  font-size: 11px;
700
918
  padding: 0 1px;
@@ -715,6 +933,7 @@
715
933
  cursor: pointer;
716
934
  padding: 0 5px;
717
935
  height: 20px;
936
+ gap: 3px;
718
937
  }
719
938
  .qt-chip-x {
720
939
  border: 0;
@@ -724,6 +943,7 @@
724
943
  font-size: 11px;
725
944
  padding: 0 2px;
726
945
  height: 20px;
946
+ justify-content: center;
727
947
  }
728
948
  .qt-autocomplete {
729
949
  display: inline-flex;
@@ -733,9 +953,6 @@
733
953
  .qt-chip-x:hover {
734
954
  color: var(--qt-fail-fg);
735
955
  }
736
- .qt-chip-move-buttons {
737
- display: none;
738
- }
739
956
  .qt-autocomplete-hint {
740
957
  color: var(--qt-muted);
741
958
  font-size: 10px;
@@ -769,8 +986,8 @@
769
986
  border-right-color: #fff;
770
987
  background: #fff;
771
988
  align-items: center;
772
- min-height: 42px;
773
- padding: 7px 4px;
989
+ min-height: 24px;
990
+ padding: 0 4px;
774
991
  }
775
992
  .qt-or-group {
776
993
  display: inline-flex;
@@ -779,7 +996,7 @@
779
996
  flex-wrap: wrap;
780
997
  border: 1px solid var(--qt-border);
781
998
  border-radius: var(--qt-radius);
782
- padding: 3px 6px;
999
+ padding: 0 6px;
783
1000
  }
784
1001
  .qt-or-member {
785
1002
  display: inline-flex;
@@ -806,7 +1023,6 @@
806
1023
  gap: 2px;
807
1024
  }
808
1025
  .qt-op-caret {
809
- font-size: 8px;
810
1026
  color: var(--qt-muted);
811
1027
  }
812
1028
  .qt-op-pop {
@@ -1002,6 +1218,59 @@
1002
1218
  .qt-cm-item:disabled:hover {
1003
1219
  background: transparent;
1004
1220
  }
1221
+ .qt-cm-submenu-wrap {
1222
+ position: relative;
1223
+ }
1224
+ .qt-cm-submenu-trigger {
1225
+ display: flex;
1226
+ align-items: center;
1227
+ justify-content: space-between;
1228
+ gap: 8px;
1229
+ }
1230
+ .qt-cm-submenu-trigger .qt-icon {
1231
+ color: var(--qt-muted);
1232
+ }
1233
+ .qt-cm-item--open {
1234
+ background: var(--qt-header-bg);
1235
+ }
1236
+ .qt-cm-submenu {
1237
+ position: absolute;
1238
+ top: -4px;
1239
+ left: calc(100% + 4px);
1240
+ z-index: 1;
1241
+ background: #fff;
1242
+ border: 1px solid var(--qt-border);
1243
+ border-radius: var(--qt-radius);
1244
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1245
+ padding: 4px;
1246
+ box-sizing: border-box;
1247
+ }
1248
+ .qt-cm-submenu::before {
1249
+ content: "";
1250
+ position: absolute;
1251
+ top: 0;
1252
+ bottom: 0;
1253
+ left: -6px;
1254
+ width: 6px;
1255
+ }
1256
+ .qt-cm-submenu--left {
1257
+ left: auto;
1258
+ right: calc(100% + 4px);
1259
+ }
1260
+ .qt-cm-submenu--left::before {
1261
+ left: auto;
1262
+ right: -6px;
1263
+ }
1264
+ .qt-sheet .qt-cm-submenu {
1265
+ position: static;
1266
+ border: 0;
1267
+ border-radius: 0;
1268
+ box-shadow: none;
1269
+ padding: 0 0 4px 12px;
1270
+ }
1271
+ .qt-sheet .qt-cm-submenu::before {
1272
+ display: none;
1273
+ }
1005
1274
  .qt-cm-item code {
1006
1275
  background: var(--qt-border-subtle);
1007
1276
  padding: 1px 4px;
@@ -1143,15 +1412,13 @@
1143
1412
  background: var(--qt-warn-bg);
1144
1413
  }
1145
1414
  .qt-qb-row--metrics {
1146
- border-top: 1px dotted var(--qt-border);
1147
- padding-top: 9px;
1148
- margin-top: 3px;
1415
+ margin: 0;
1149
1416
  }
1150
1417
  .qt-chip--agg {
1151
1418
  gap: 4px;
1152
1419
  height: auto;
1153
1420
  min-height: 24px;
1154
- padding: 1px 6px;
1421
+ padding: 0 6px;
1155
1422
  flex-wrap: wrap;
1156
1423
  }
1157
1424
  .qt-chip-agg-by {
@@ -1169,6 +1436,7 @@
1169
1436
  border-radius: 4px;
1170
1437
  padding: 0 2px 0 6px;
1171
1438
  height: 20px;
1439
+ box-sizing: border-box;
1172
1440
  font-size: 11px;
1173
1441
  }
1174
1442
  .qt-chip-agg-group-label {
@@ -1178,8 +1446,11 @@
1178
1446
  font-size: 9px;
1179
1447
  padding: 0 1px;
1180
1448
  }
1181
- .qt-chip-agg-add {
1182
- padding: 0 7px;
1449
+ .qt-chip--agg .qt-chip-agg-add {
1450
+ height: 20px;
1451
+ border-radius: 4px;
1452
+ padding: 0 5px;
1453
+ font-size: 11px;
1183
1454
  }
1184
1455
  .qt-metrics {
1185
1456
  display: flex;
@@ -1362,11 +1633,11 @@
1362
1633
  }
1363
1634
  .qt-qt-section-toggle {
1364
1635
  position: absolute;
1365
- left: -20px;
1636
+ left: -28px;
1366
1637
  top: 0;
1367
- width: 20px;
1368
- height: 26px;
1369
- min-width: 20px;
1638
+ width: 28px;
1639
+ height: 32px;
1640
+ min-width: 28px;
1370
1641
  padding: 0;
1371
1642
  border-right: 0;
1372
1643
  border-radius: var(--qt-radius) 0 0 var(--qt-radius);
@@ -1380,7 +1651,9 @@
1380
1651
  line-height: 1;
1381
1652
  transition: transform 0.12s ease;
1382
1653
  transform: rotate(0deg);
1383
- font-size: 13px;
1654
+ width: 18px;
1655
+ height: 18px;
1656
+ flex-shrink: 0;
1384
1657
  }
1385
1658
  .qt-qt-section-toggle-caret--collapsed {
1386
1659
  transform: rotate(-90deg);
@@ -1414,7 +1687,7 @@
1414
1687
  display: none;
1415
1688
  }
1416
1689
  }
1417
- @media (max-width: 640px) {
1690
+ @media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
1418
1691
  .qt-qb {
1419
1692
  font-size: 14px;
1420
1693
  }
@@ -1497,7 +1770,7 @@
1497
1770
  .qt-chip {
1498
1771
  height: auto;
1499
1772
  min-height: 40px;
1500
- padding: 4px 8px;
1773
+ padding: 0 8px;
1501
1774
  gap: 5px;
1502
1775
  flex-wrap: wrap;
1503
1776
  font-size: 13px;
@@ -1508,60 +1781,24 @@
1508
1781
  .qt-chip-x {
1509
1782
  min-width: 30px;
1510
1783
  min-height: 30px;
1511
- padding: 4px 7px;
1784
+ padding: 0 7px;
1512
1785
  justify-content: center;
1513
1786
  font-size: 13px;
1514
1787
  }
1515
- .qt-chip-move-buttons {
1516
- display: inline-flex;
1517
- align-items: center;
1518
- overflow: hidden;
1519
- border: 1px solid var(--qt-border-subtle);
1520
- border-radius: 5px;
1521
- }
1522
- .qt-chip-move {
1523
- display: inline-flex;
1524
- align-items: center;
1525
- justify-content: center;
1526
- width: 30px;
1527
- min-width: 30px;
1528
- height: 30px;
1529
- padding: 0;
1530
- color: var(--qt-text);
1531
- background: #fff;
1532
- border: 0;
1533
- border-right: 1px solid var(--qt-border-subtle);
1534
- font: inherit;
1535
- font-size: 14px;
1536
- cursor: pointer;
1537
- touch-action: manipulation;
1538
- }
1539
- .qt-chip-move:last-child {
1540
- border-right: 0;
1541
- }
1542
- .qt-chip-move:disabled {
1543
- opacity: 0.35;
1544
- }
1545
- .qt-chip-move:focus-visible {
1546
- z-index: 1;
1547
- outline: 2px solid var(--qt-accent);
1548
- outline-offset: -2px;
1549
- }
1550
1788
  .qt-chip-op,
1551
1789
  .qt-chip-val {
1552
1790
  height: 32px;
1553
1791
  min-height: 32px;
1554
- padding: 4px 6px;
1792
+ padding: 0 6px;
1555
1793
  font-size: 16px;
1556
1794
  }
1557
1795
  .qt-chip-op-btn {
1558
1796
  height: 32px;
1559
- padding: 4px 8px;
1797
+ padding: 0 8px;
1560
1798
  font-size: 13px;
1561
1799
  }
1562
1800
  .qt-chip-where-list,
1563
- .qt-chip-where-clause,
1564
- .qt-sort-extract {
1801
+ .qt-chip-where-clause {
1565
1802
  max-width: 100%;
1566
1803
  }
1567
1804
  .qt-chip--where {
@@ -1586,6 +1823,7 @@
1586
1823
  }
1587
1824
  .qt-qb-window-field {
1588
1825
  display: flex;
1826
+ align-items: stretch;
1589
1827
  flex: 1 1 0;
1590
1828
  flex-direction: column;
1591
1829
  gap: 5px;
@@ -1605,10 +1843,6 @@
1605
1843
  padding: 6px 8px;
1606
1844
  font-size: 16px;
1607
1845
  }
1608
- .qt-qb-row--metrics {
1609
- padding-top: 14px;
1610
- margin-top: 0;
1611
- }
1612
1846
  .qt-qb-run-bar {
1613
1847
  align-items: center;
1614
1848
  row-gap: 6px;
@@ -1750,8 +1984,9 @@
1750
1984
  font-weight: 700;
1751
1985
  letter-spacing: 0.02em;
1752
1986
  }
1753
- .qt-table-scroll-cue span {
1754
- font-size: 15px;
1987
+ .qt-table-scroll-cue .qt-icon {
1988
+ width: 16px;
1989
+ height: 16px;
1755
1990
  }
1756
1991
  .qt-table-wrap {
1757
1992
  container-type: inline-size;
@@ -1941,6 +2176,9 @@
1941
2176
  padding: 7px 5px;
1942
2177
  }
1943
2178
  .qt-column-name {
2179
+ display: flex;
2180
+ align-items: center;
2181
+ gap: 4px;
1944
2182
  border: 0;
1945
2183
  background: transparent;
1946
2184
  text-align: left;
@@ -1952,6 +2190,9 @@
1952
2190
  color: inherit;
1953
2191
  }
1954
2192
  .qt-icon-btn {
2193
+ display: inline-flex;
2194
+ align-items: center;
2195
+ justify-content: center;
1955
2196
  border: 0;
1956
2197
  background: transparent;
1957
2198
  color: inherit;
@@ -2020,39 +2261,208 @@
2020
2261
  padding: 4px 10px;
2021
2262
  font-size: 11px;
2022
2263
  }
2264
+ .qt-formula-layout {
2265
+ display: flex;
2266
+ flex-wrap: wrap;
2267
+ align-items: flex-start;
2268
+ gap: 16px;
2269
+ margin-bottom: 16px;
2270
+ }
2271
+ .qt-formula-editor {
2272
+ flex: 1 1 320px;
2273
+ min-width: 0;
2274
+ }
2023
2275
  .qt-function-library {
2024
- margin: 10px 0;
2276
+ flex: 1 1 260px;
2277
+ min-width: 0;
2278
+ max-width: 330px;
2279
+ padding: 12px;
2280
+ border: 1px solid var(--qt-border, #dbe1e8);
2281
+ border-radius: 8px;
2282
+ background: var(--qt-bg-muted, #f8fafc);
2025
2283
  font-size: 12px;
2026
2284
  }
2027
- .qt-function-library summary {
2028
- cursor: pointer;
2029
- margin-bottom: 8px;
2285
+ .qt-function-library h4 {
2286
+ margin: 0 0 6px;
2287
+ font-size: 14px;
2288
+ }
2289
+ .qt-function-search,
2290
+ .qt-function-filters label {
2291
+ display: flex;
2292
+ flex-direction: column;
2293
+ gap: 4px;
2294
+ font-weight: 600;
2295
+ }
2296
+ .qt-function-search .qt-input {
2297
+ box-sizing: border-box;
2298
+ width: 100%;
2299
+ min-width: 0;
2300
+ margin-bottom: 10px;
2301
+ }
2302
+ .qt-function-filters {
2303
+ display: flex;
2304
+ flex-wrap: wrap;
2305
+ gap: 8px;
2306
+ }
2307
+ .qt-function-filters label {
2308
+ flex: 1 1 110px;
2309
+ min-width: 0;
2310
+ }
2311
+ .qt-function-filters select {
2312
+ width: 100%;
2313
+ min-width: 0;
2314
+ padding: 6px;
2315
+ border: 1px solid var(--qt-border, #dbe1e8);
2316
+ border-radius: 5px;
2317
+ color: inherit;
2318
+ background: var(--qt-bg, #fff);
2319
+ font: inherit;
2320
+ }
2321
+ .qt-select-editor .qt-function-count,
2322
+ .qt-select-editor .qt-function-concept {
2323
+ margin: 10px 0 6px;
2324
+ color: var(--qt-muted, #64748b);
2030
2325
  }
2031
2326
  .qt-function-list {
2032
- max-height: 190px;
2033
- overflow: auto;
2327
+ position: relative;
2328
+ max-height: 320px;
2329
+ overflow-y: auto;
2330
+ overscroll-behavior: contain;
2034
2331
  margin: 8px 0;
2035
2332
  }
2036
2333
  .qt-function-list button {
2037
2334
  display: flex;
2038
2335
  flex-direction: column;
2039
2336
  text-align: left;
2040
- gap: 3px;
2041
- padding: 8px;
2042
- background: transparent;
2337
+ gap: 5px;
2338
+ padding: 10px 8px;
2043
2339
  border: 0;
2044
2340
  border-bottom: 1px solid var(--qt-border, #dbe1e8);
2045
2341
  width: 100%;
2046
2342
  color: inherit;
2343
+ background: transparent;
2047
2344
  cursor: pointer;
2345
+ border-radius: 4px;
2346
+ }
2347
+ .qt-function-list button:hover,
2348
+ .qt-function-list button[aria-selected=true] {
2349
+ background: var(--qt-accent-bg, #edf3ff);
2350
+ }
2351
+ .qt-function-list button:focus-visible {
2352
+ outline: 2px solid var(--qt-accent, #285cc4);
2353
+ outline-offset: -2px;
2354
+ }
2355
+ .qt-function-card-title {
2356
+ display: flex;
2357
+ flex-wrap: wrap;
2358
+ align-items: center;
2359
+ justify-content: space-between;
2360
+ gap: 4px;
2361
+ width: 100%;
2048
2362
  }
2049
- .qt-function-list small {
2363
+ .qt-function-card-title > span {
2364
+ font-size: 10px;
2050
2365
  color: var(--qt-muted, #64748b);
2051
2366
  }
2052
- .qt-function-help {
2053
- padding: 10px;
2054
- max-width: 400px;
2055
- font: 12px/1.5 system-ui;
2367
+ .qt-function-list code {
2368
+ font-size: 11px;
2369
+ overflow-wrap: anywhere;
2370
+ white-space: normal;
2371
+ }
2372
+ .qt-function-list small,
2373
+ .qt-function-card-concept {
2374
+ color: var(--qt-muted, #64748b);
2375
+ }
2376
+ .qt-function-card-concept {
2377
+ font-size: 10px;
2378
+ }
2379
+ .qt-select-editor .qt-function-insert-hint,
2380
+ .qt-select-editor .qt-function-empty {
2381
+ margin: 8px 0 0;
2382
+ color: var(--qt-muted, #64748b);
2383
+ font-size: 11px;
2384
+ }
2385
+ @media (max-width: 1100px) {
2386
+ .qt-function-library {
2387
+ max-width: none;
2388
+ }
2389
+ }
2390
+ @media (max-width: 760px) {
2391
+ .qt-formula-editor,
2392
+ .qt-function-library {
2393
+ flex-basis: 100%;
2394
+ max-width: none;
2395
+ }
2396
+ .qt-function-list {
2397
+ max-height: 240px;
2398
+ }
2399
+ }
2400
+ .qt-formula-input {
2401
+ display: block;
2402
+ box-sizing: border-box;
2403
+ width: 100%;
2404
+ min-height: 130px;
2405
+ max-height: 260px;
2406
+ resize: vertical;
2407
+ padding: 12px;
2408
+ border: 1px solid var(--qt-border, #cbd5e1);
2409
+ border-radius: 6px;
2410
+ background: var(--qt-bg, #fff);
2411
+ color: var(--qt-text, inherit);
2412
+ font: 13px/1.6 ui-monospace, monospace;
2413
+ }
2414
+ .qt-formula-input:focus-visible {
2415
+ outline: 2px solid var(--qt-accent, #285cc4);
2416
+ outline-offset: 2px;
2417
+ }
2418
+ .qt-formula-tools {
2419
+ display: flex;
2420
+ justify-content: space-between;
2421
+ gap: 12px;
2422
+ margin-top: 6px;
2423
+ color: var(--qt-muted, #64748b);
2424
+ font-size: 11px;
2425
+ }
2426
+ .qt-formula-completions {
2427
+ margin-top: 8px;
2428
+ border: 1px solid var(--qt-border, #cbd5e1);
2429
+ border-radius: 6px;
2430
+ background: var(--qt-bg, #fff);
2431
+ font-size: 12px;
2432
+ }
2433
+ .qt-formula-completions ul {
2434
+ margin: 0;
2435
+ padding: 4px;
2436
+ list-style: none;
2437
+ max-height: 180px;
2438
+ overflow: auto;
2439
+ }
2440
+ .qt-formula-completions li {
2441
+ display: flex;
2442
+ flex-direction: column;
2443
+ gap: 3px;
2444
+ padding: 7px 8px;
2445
+ border-radius: 4px;
2446
+ cursor: pointer;
2447
+ overflow-wrap: anywhere;
2448
+ }
2449
+ .qt-formula-completions li:hover,
2450
+ .qt-formula-completions li[aria-selected=true] {
2451
+ background: var(--qt-accent-bg, #edf3ff);
2452
+ }
2453
+ .qt-formula-completions small {
2454
+ color: var(--qt-muted, #64748b);
2455
+ }
2456
+ .qt-formula-completions p {
2457
+ margin: 0;
2458
+ padding: 8px;
2459
+ border-top: 1px solid var(--qt-border, #cbd5e1);
2460
+ color: var(--qt-muted, #64748b);
2461
+ overflow-wrap: anywhere;
2462
+ }
2463
+ .qt-formula-editor > .qt-formula-error {
2464
+ margin-bottom: 10px;
2465
+ font-size: 12px;
2056
2466
  }
2057
2467
  .qt-definition-actions {
2058
2468
  display: flex;
@@ -2235,8 +2645,7 @@
2235
2645
  .qt-select-editor .qt-input,
2236
2646
  .qt-select-editor textarea,
2237
2647
  .qt-select-editor .qt-preview-controls input,
2238
- .qt-select-editor .qt-preview-controls select,
2239
- .qt-select-editor .cm-editor {
2648
+ .qt-select-editor .qt-preview-controls select {
2240
2649
  color: var(--qt-text);
2241
2650
  background: var(--qt-bg-muted);
2242
2651
  border-color: var(--qt-border);
@@ -2252,4 +2661,2743 @@
2252
2661
  color: #3fb950;
2253
2662
  }
2254
2663
  }
2664
+ .qt-overlay-backdrop {
2665
+ z-index: 1000;
2666
+ }
2667
+ .qt-modal-surface {
2668
+ display: flex;
2669
+ flex-direction: column;
2670
+ overflow: hidden;
2671
+ padding: 0;
2672
+ color: var(--qt-text);
2673
+ background: var(--qt-bg, #fff);
2674
+ }
2675
+ .qt-modal-surface:focus {
2676
+ outline: none;
2677
+ }
2678
+ .qt-overlay-header {
2679
+ display: flex;
2680
+ align-items: center;
2681
+ justify-content: space-between;
2682
+ gap: 16px;
2683
+ flex-shrink: 0;
2684
+ padding: 12px 16px;
2685
+ border-bottom: 1px solid var(--qt-border-subtle);
2686
+ }
2687
+ .qt-overlay-header h2 {
2688
+ margin: 0;
2689
+ font-size: 17px;
2690
+ line-height: 1.3;
2691
+ overflow-wrap: anywhere;
2692
+ }
2693
+ .qt-overlay-header .qt-btn {
2694
+ flex-shrink: 0;
2695
+ color: var(--qt-accent);
2696
+ }
2697
+ .qt-overlay-body {
2698
+ padding: 16px;
2699
+ overflow-y: auto;
2700
+ overscroll-behavior: contain;
2701
+ min-height: 0;
2702
+ }
2703
+ .qt-editor-mobile-nav {
2704
+ display: none;
2705
+ }
2706
+ .qt-reorder-hint {
2707
+ margin: 0;
2708
+ padding: 16px;
2709
+ font-size: 14px;
2710
+ line-height: 1.5;
2711
+ }
2712
+ .qt-reorder-list {
2713
+ list-style: none;
2714
+ margin: 0;
2715
+ padding: 0 16px 16px;
2716
+ overflow-y: auto;
2717
+ overscroll-behavior: contain;
2718
+ min-height: 0;
2719
+ }
2720
+ .qt-reorder-item {
2721
+ display: flex;
2722
+ align-items: center;
2723
+ gap: 12px;
2724
+ min-height: 60px;
2725
+ padding: 4px 0 4px 12px;
2726
+ box-sizing: border-box;
2727
+ border-bottom: 1px solid var(--qt-border-subtle);
2728
+ background: var(--qt-bg, #fff);
2729
+ }
2730
+ .qt-reorder-item--dragging {
2731
+ background: var(--qt-accent-bg);
2732
+ border-radius: 8px;
2733
+ box-shadow: 0 0 0 2px var(--qt-accent);
2734
+ }
2735
+ .qt-reorder-label {
2736
+ flex: 1;
2737
+ min-width: 0;
2738
+ overflow-wrap: anywhere;
2739
+ font-size: 15px;
2740
+ }
2741
+ .qt-reorder-handle {
2742
+ display: flex;
2743
+ align-items: center;
2744
+ justify-content: center;
2745
+ min-width: 48px;
2746
+ min-height: 48px;
2747
+ border: 0;
2748
+ border-radius: 8px;
2749
+ background: transparent;
2750
+ color: var(--qt-muted);
2751
+ font-size: 26px;
2752
+ cursor: grab;
2753
+ touch-action: none;
2754
+ user-select: none;
2755
+ -webkit-user-select: none;
2756
+ }
2757
+ .qt-reorder-handle:active {
2758
+ cursor: grabbing;
2759
+ color: var(--qt-accent);
2760
+ }
2761
+ .qt-reorder-handle:disabled {
2762
+ opacity: 0.4;
2763
+ }
2764
+ .qt-value-picker {
2765
+ position: relative;
2766
+ }
2767
+ .qt-value-picker-pop {
2768
+ display: flex;
2769
+ flex-direction: column;
2770
+ gap: 8px;
2771
+ position: absolute;
2772
+ top: 100%;
2773
+ left: 0;
2774
+ z-index: 30;
2775
+ background: var(--qt-bg, #fff);
2776
+ padding: 8px;
2777
+ min-width: 220px;
2778
+ max-height: 300px;
2779
+ border: 1px solid var(--qt-border);
2780
+ border-radius: var(--qt-radius);
2781
+ box-shadow: 0 4px 16px #0002;
2782
+ }
2783
+ .qt-value-picker-list {
2784
+ overflow-y: auto;
2785
+ min-height: 0;
2786
+ }
2787
+ .qt-value-picker-list button {
2788
+ display: block;
2789
+ width: 100%;
2790
+ padding: 8px;
2791
+ text-align: left;
2792
+ font: inherit;
2793
+ color: var(--qt-text);
2794
+ border: 0;
2795
+ border-radius: 6px;
2796
+ background: transparent;
2797
+ }
2798
+ .qt-value-picker-list button:hover,
2799
+ .qt-value-picker-list button[aria-pressed=true] {
2800
+ background: var(--qt-accent-bg);
2801
+ }
2802
+ @media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
2803
+ .qt-qb *,
2804
+ .qt-sheet * {
2805
+ box-sizing: border-box;
2806
+ }
2807
+ .qt-qb .qt-btn,
2808
+ .qt-qb .qt-add,
2809
+ .qt-qb .qt-link-btn,
2810
+ .qt-sheet button,
2811
+ .qt-sheet select,
2812
+ .qt-sheet input:not([type=checkbox]),
2813
+ .qt-selection-toolbar .qt-btn {
2814
+ min-height: 44px;
2815
+ touch-action: manipulation;
2816
+ }
2817
+ .qt-qb .qt-btn,
2818
+ .qt-qb .qt-add,
2819
+ .qt-qb .qt-link-btn {
2820
+ padding: 6px 10px;
2821
+ min-width: 44px;
2822
+ }
2823
+ .qt-qb-bar {
2824
+ padding: 4px 8px;
2825
+ }
2826
+ .qt-qb-state-bar {
2827
+ padding-left: 36px;
2828
+ min-height: 40px;
2829
+ gap: 6px;
2830
+ }
2831
+ .qt-qb-state-bar .qt-btn {
2832
+ min-height: 32px;
2833
+ min-width: 32px;
2834
+ padding: 0 6px;
2835
+ }
2836
+ .qt-qb-state-bar .qt-qb-collapse-btn {
2837
+ left: 6px;
2838
+ width: 24px;
2839
+ min-width: 24px;
2840
+ height: 24px;
2841
+ min-height: 24px;
2842
+ padding: 0;
2843
+ }
2844
+ .qt-qb-editor-bar {
2845
+ padding: 8px;
2846
+ gap: 8px;
2847
+ }
2848
+ .qt-qb-editor-bar .qt-qb-body {
2849
+ gap: 0;
2850
+ }
2851
+ .qt-qb-editor-bar .qt-qb-row {
2852
+ gap: 6px;
2853
+ }
2854
+ .qt-qb-editor-stack {
2855
+ gap: 6px;
2856
+ }
2857
+ .qt-qb .qt-chip {
2858
+ padding: 0 6px;
2859
+ gap: 4px;
2860
+ }
2861
+ .qt-qb-run-bar {
2862
+ padding: 10px 8px;
2863
+ }
2864
+ .qt-qb-run-actions {
2865
+ display: grid;
2866
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2867
+ gap: 6px;
2868
+ }
2869
+ .qt-qb-run-actions > .qt-qb-auto-status {
2870
+ grid-column: 1 / -1;
2871
+ }
2872
+ .qt-qb-run-actions > .qt-btn,
2873
+ .qt-auto-refresh > .qt-btn {
2874
+ justify-content: center;
2875
+ padding-left: 8px;
2876
+ padding-right: 8px;
2877
+ }
2878
+ .qt-qb-pagination {
2879
+ gap: 8px;
2880
+ }
2881
+ .qt-qb-window-field {
2882
+ gap: 6px;
2883
+ }
2884
+ .qt-qb-window-field > .qt-qb-kw[data-mobile-label] {
2885
+ min-height: 32px;
2886
+ align-items: center;
2887
+ font-size: 0;
2888
+ }
2889
+ .qt-qb-window-field + .qt-qb-window-field {
2890
+ margin-left: 6px;
2891
+ padding-left: 12px;
2892
+ }
2893
+ .qt-qb .qt-qb-num {
2894
+ min-height: 32px;
2895
+ padding: 0 8px;
2896
+ border-radius: 8px;
2897
+ }
2898
+ .qt-qb-num-combo {
2899
+ display: flex;
2900
+ min-width: 0;
2901
+ }
2902
+ .qt-qb-num-combo > .qt-qb-num {
2903
+ flex: 1;
2904
+ min-width: 0;
2905
+ border-radius: 8px 0 0 8px;
2906
+ }
2907
+ .qt-qb-num-step {
2908
+ min-width: 44px;
2909
+ padding: 0 10px;
2910
+ font-size: 13px;
2911
+ touch-action: manipulation;
2912
+ }
2913
+ .qt-qb-num-step:last-child {
2914
+ border-radius: 0 8px 8px 0;
2915
+ }
2916
+ .qt-qt-section-head {
2917
+ padding: 2px 8px 2px 36px;
2918
+ }
2919
+ .qt-metrics {
2920
+ padding: 8px;
2921
+ gap: 8px;
2922
+ }
2923
+ .qt-th,
2924
+ .qt-cell {
2925
+ height: 44px;
2926
+ padding-top: 6px;
2927
+ padding-bottom: 6px;
2928
+ }
2929
+ .qt-qb .qt-qb-saved-star,
2930
+ .qt-qb .qt-qb-saved-cancel {
2931
+ min-width: 44px;
2932
+ min-height: 44px;
2933
+ }
2934
+ .qt-qb-state-bar .qt-qb-saved-star,
2935
+ .qt-qb-state-bar .qt-qb-saved-cancel {
2936
+ min-width: 32px;
2937
+ min-height: 32px;
2938
+ }
2939
+ .qt-qt-section-toggle {
2940
+ width: 24px;
2941
+ min-width: 24px;
2942
+ height: 24px;
2943
+ min-height: 24px;
2944
+ top: 12px;
2945
+ left: 6px;
2946
+ }
2947
+ .qt-qb-state-bar .qt-qb-collapse-btn,
2948
+ .qt-qt-section-toggle {
2949
+ border-color: transparent;
2950
+ background: transparent;
2951
+ }
2952
+ .qt-qb-state-bar .qt-qb-collapse-btn::before,
2953
+ .qt-qt-section-toggle::before {
2954
+ content: "";
2955
+ position: absolute;
2956
+ inset: -10px;
2957
+ }
2958
+ .qt-qb-collapse-caret,
2959
+ .qt-qt-section-toggle-caret {
2960
+ width: 14px;
2961
+ height: 14px;
2962
+ }
2963
+ .qt-qb .qt-chip-x,
2964
+ .qt-qb .qt-chip-op-btn {
2965
+ min-height: 32px;
2966
+ min-width: 32px;
2967
+ padding-top: 0;
2968
+ padding-bottom: 0;
2969
+ }
2970
+ .qt-qb .qt-chip-op,
2971
+ .qt-qb .qt-chip-val {
2972
+ min-height: 32px;
2973
+ font-size: 16px;
2974
+ max-width: 100%;
2975
+ }
2976
+ .qt-qb-editor-bar .qt-btn,
2977
+ .qt-qb-editor-bar .qt-add,
2978
+ .qt-qb-editor-bar .qt-link-btn {
2979
+ min-height: 32px;
2980
+ padding: 0 8px;
2981
+ }
2982
+ .qt-qb-editor-bar .qt-qb-row:not(.qt-qb-pagination) > .qt-qb-kw[data-mobile-label] {
2983
+ flex: 1 0 auto;
2984
+ align-self: center;
2985
+ width: auto;
2986
+ font-size: 0;
2987
+ }
2988
+ .qt-qb-kw[data-mobile-label]::after {
2989
+ content: attr(data-mobile-label);
2990
+ font-size: 14px;
2991
+ font-weight: 650;
2992
+ letter-spacing: 0;
2993
+ text-transform: none;
2994
+ color: var(--qt-text);
2995
+ }
2996
+ .qt-sheet .qt-reorder-handle {
2997
+ touch-action: none;
2998
+ }
2999
+ .qt-qb-row > .qt-chip--col:not(.qt-chip--sort) {
3000
+ max-width: 100%;
3001
+ }
3002
+ .qt-chip--sort {
3003
+ flex: 1 0 100%;
3004
+ max-width: 100%;
3005
+ }
3006
+ .qt-chip--sort > .qt-chip-field {
3007
+ flex: 1;
3008
+ }
3009
+ .qt-chip--sort > .qt-chip-x {
3010
+ margin-left: auto;
3011
+ }
3012
+ .qt-where-term-wrap {
3013
+ flex: 1 0 100%;
3014
+ max-width: 100%;
3015
+ }
3016
+ .qt-mobile-clause {
3017
+ display: flex;
3018
+ align-items: stretch;
3019
+ flex: 1 0 100%;
3020
+ width: 100%;
3021
+ max-width: 100%;
3022
+ min-width: 0;
3023
+ min-height: 32px;
3024
+ border-radius: 8px;
3025
+ background: var(--qt-bg, #fff);
3026
+ box-shadow: inset 0 0 0 1px var(--qt-border);
3027
+ overflow: hidden;
3028
+ }
3029
+ .qt-mobile-clause:focus-within {
3030
+ outline: 2px solid var(--qt-accent);
3031
+ outline-offset: 2px;
3032
+ }
3033
+ .qt-mobile-filter {
3034
+ display: flex;
3035
+ align-items: center;
3036
+ justify-content: space-between;
3037
+ flex: 1;
3038
+ gap: 6px;
3039
+ min-width: 0;
3040
+ min-height: 32px;
3041
+ padding: 0 8px;
3042
+ border: 0;
3043
+ border-radius: 0;
3044
+ background: transparent;
3045
+ color: var(--qt-text);
3046
+ font: inherit;
3047
+ text-align: left;
3048
+ cursor: pointer;
3049
+ touch-action: manipulation;
3050
+ }
3051
+ .qt-mobile-filter:hover:not(:disabled) {
3052
+ background: var(--qt-accent-bg);
3053
+ }
3054
+ .qt-mobile-clause button:disabled {
3055
+ cursor: default;
3056
+ opacity: 0.5;
3057
+ }
3058
+ .qt-mobile-filter > span:first-child {
3059
+ flex: 1;
3060
+ min-width: 0;
3061
+ }
3062
+ .qt-mobile-filter-summary {
3063
+ display: flex;
3064
+ flex-direction: row;
3065
+ flex-wrap: wrap;
3066
+ align-items: baseline;
3067
+ column-gap: 6px;
3068
+ row-gap: 0;
3069
+ overflow-wrap: anywhere;
3070
+ font-size: 13px;
3071
+ line-height: 16px;
3072
+ }
3073
+ .qt-mobile-filter-summary > span {
3074
+ color: var(--qt-muted);
3075
+ font-size: 13px;
3076
+ }
3077
+ .qt-mobile-filter-summary > small {
3078
+ color: var(--qt-accent);
3079
+ font-size: 12px;
3080
+ }
3081
+ .qt-mobile-filter-edit {
3082
+ display: inline-flex;
3083
+ align-items: center;
3084
+ flex-shrink: 0;
3085
+ color: var(--qt-accent);
3086
+ }
3087
+ .qt-qb-section-header {
3088
+ display: flex;
3089
+ align-items: center;
3090
+ flex-wrap: wrap;
3091
+ gap: 6px;
3092
+ flex: 1 0 100%;
3093
+ min-width: 0;
3094
+ }
3095
+ .qt-qb-section-header > .qt-qb-kw {
3096
+ flex: 1;
3097
+ min-width: 0;
3098
+ width: auto;
3099
+ font-size: 0;
3100
+ }
3101
+ .qt-qb-section-header > .qt-add {
3102
+ font-size: 0;
3103
+ gap: 0;
3104
+ }
3105
+ .qt-qb-section-header > .qt-add::after {
3106
+ content: "Add";
3107
+ font-size: 12px;
3108
+ margin-left: 4px;
3109
+ }
3110
+ .qt-qb-section-header > .qt-btn,
3111
+ .qt-qb-section-header > .qt-add,
3112
+ .qt-qb-section-header > .qt-link-btn {
3113
+ padding: 0 6px;
3114
+ min-width: 0;
3115
+ }
3116
+ .qt-qb-section-header > .qt-add,
3117
+ .qt-qb .qt-split-btn > .qt-add:first-child {
3118
+ padding-right: 8px;
3119
+ }
3120
+ .qt-split-btn {
3121
+ height: 32px;
3122
+ }
3123
+ .qt-qb .qt-split-btn > .qt-split-btn-caret {
3124
+ width: 28px;
3125
+ }
3126
+ .qt-qb-row--filters > .qt-qb-hint,
3127
+ .qt-qb-row--sort > .qt-qb-hint,
3128
+ .qt-qb-row--metrics > .qt-qb-hint {
3129
+ flex-basis: 100%;
3130
+ }
3131
+ .qt-query-reorder-list {
3132
+ display: flex;
3133
+ flex-direction: column;
3134
+ gap: 4px;
3135
+ flex: 1 0 100%;
3136
+ width: 100%;
3137
+ max-width: 100%;
3138
+ min-width: 0;
3139
+ padding: 0;
3140
+ overflow: visible;
3141
+ }
3142
+ .qt-query-reorder-list > .qt-reorder-item {
3143
+ min-height: 32px;
3144
+ max-width: 100%;
3145
+ min-width: 0;
3146
+ padding: 0;
3147
+ gap: 0;
3148
+ border: 0;
3149
+ border-radius: 8px;
3150
+ box-shadow: inset 0 0 0 1px var(--qt-border);
3151
+ }
3152
+ .qt-query-reorder-list > .qt-reorder-item {
3153
+ overflow: hidden;
3154
+ }
3155
+ .qt-query-reorder-list > .qt-reorder-item:hover:not(:has(:disabled)) {
3156
+ background: var(--qt-accent-bg);
3157
+ }
3158
+ .qt-query-reorder-list .qt-mobile-filter:hover:not(:disabled) {
3159
+ background: transparent;
3160
+ }
3161
+ .qt-query-reorder-list > .qt-reorder-item:focus-within {
3162
+ outline: 2px solid var(--qt-accent);
3163
+ outline-offset: 2px;
3164
+ }
3165
+ .qt-query-reorder-list .qt-reorder-handle {
3166
+ flex-shrink: 0;
3167
+ min-width: 24px;
3168
+ min-height: 32px;
3169
+ padding: 0;
3170
+ font-size: 20px;
3171
+ }
3172
+ .qt-query-reorder-list .qt-reorder-handle > .qt-icon {
3173
+ width: 12px;
3174
+ }
3175
+ .qt-query-reorder-list .qt-mobile-filter {
3176
+ padding-left: 4px;
3177
+ }
3178
+ .qt-query-reorder-list .qt-mobile-clause {
3179
+ flex: 1;
3180
+ box-shadow: none;
3181
+ border-radius: 0;
3182
+ background: transparent;
3183
+ }
3184
+ .qt-query-reorder-list .qt-reorder-item--dragging {
3185
+ position: relative;
3186
+ z-index: 1;
3187
+ box-shadow: 0 0 0 2px var(--qt-accent);
3188
+ }
3189
+ .qt-query-reorder-list--columns {
3190
+ flex-direction: row;
3191
+ flex-wrap: wrap;
3192
+ }
3193
+ .qt-query-reorder-list--columns .qt-chip-field {
3194
+ min-width: 0;
3195
+ padding-right: 4px;
3196
+ font-size: 13px;
3197
+ overflow-wrap: anywhere;
3198
+ }
3199
+ .qt-overlay-backdrop--mobile {
3200
+ inset: 0;
3201
+ padding: max(12px, env(safe-area-inset-top)) 0 0;
3202
+ align-items: flex-end;
3203
+ background: rgba(15, 23, 42, 0.42);
3204
+ }
3205
+ .qt-modal-surface.qt-sheet {
3206
+ width: 100%;
3207
+ max-width: none;
3208
+ max-height: 100%;
3209
+ border: 0;
3210
+ border-radius: 20px 20px 0 0;
3211
+ box-shadow: 0 -8px 40px #0002;
3212
+ padding: 0 0 env(safe-area-inset-bottom);
3213
+ animation: qt-sheet-enter 180ms ease-out;
3214
+ }
3215
+ .qt-sheet-handle {
3216
+ display: flex;
3217
+ align-items: center;
3218
+ justify-content: center;
3219
+ min-height: 16px;
3220
+ flex-shrink: 0;
3221
+ touch-action: none;
3222
+ cursor: grab;
3223
+ }
3224
+ .qt-sheet-handle span {
3225
+ width: 36px;
3226
+ height: 4px;
3227
+ border-radius: 4px;
3228
+ background: var(--qt-border);
3229
+ }
3230
+ .qt-overlay-header {
3231
+ padding: 0 12px 6px;
3232
+ }
3233
+ .qt-overlay-header h2 {
3234
+ font-size: 18px;
3235
+ }
3236
+ .qt-overlay-header .qt-btn {
3237
+ font-size: 15px;
3238
+ border: 0;
3239
+ background: transparent;
3240
+ }
3241
+ .qt-sheet .qt-overlay-body {
3242
+ padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
3243
+ }
3244
+ .qt-sheet .qt-sort-extract-footer {
3245
+ padding: 8px 12px;
3246
+ }
3247
+ .qt-sheet .qt-sort-extract-footer > button {
3248
+ min-height: 32px;
3249
+ padding: 0 8px;
3250
+ }
3251
+ .qt-sheet .qt-reorder-hint {
3252
+ padding: 6px 12px;
3253
+ font-size: 13px;
3254
+ }
3255
+ .qt-sheet .qt-reorder-list {
3256
+ padding: 0 12px 8px;
3257
+ }
3258
+ .qt-sheet .qt-reorder-item {
3259
+ min-height: 32px;
3260
+ padding: 0;
3261
+ gap: 4px;
3262
+ }
3263
+ .qt-sheet .qt-reorder-handle {
3264
+ min-width: 32px;
3265
+ min-height: 32px;
3266
+ padding: 0;
3267
+ font-size: 20px;
3268
+ }
3269
+ .qt-sheet .qt-picker {
3270
+ display: flex;
3271
+ flex-direction: column;
3272
+ padding: 10px 12px;
3273
+ flex: 0 1 auto;
3274
+ min-height: 0;
3275
+ }
3276
+ .qt-sheet .qt-picker-input {
3277
+ flex-shrink: 0;
3278
+ min-height: 44px;
3279
+ padding: 6px 10px;
3280
+ border-radius: 10px;
3281
+ }
3282
+ .qt-sheet .qt-picker-list {
3283
+ position: static;
3284
+ width: 100%;
3285
+ max-width: none;
3286
+ max-height: none;
3287
+ min-height: 0;
3288
+ margin-top: 6px;
3289
+ border: 0;
3290
+ box-shadow: none;
3291
+ overscroll-behavior: contain;
3292
+ }
3293
+ .qt-sheet .qt-picker-item {
3294
+ padding: 6px 4px;
3295
+ min-height: 44px;
3296
+ border-bottom: 1px solid var(--qt-border-subtle);
3297
+ }
3298
+ .qt-sheet .qt-picker-row {
3299
+ align-items: center;
3300
+ }
3301
+ .qt-sheet .qt-picker-group-label {
3302
+ padding: 4px;
3303
+ }
3304
+ .qt-sheet .qt-picker-label,
3305
+ .qt-sheet .qt-picker-name {
3306
+ overflow-wrap: anywhere;
3307
+ min-width: 0;
3308
+ }
3309
+ .qt-sheet .qt-picker-name {
3310
+ font-size: 12px;
3311
+ }
3312
+ .qt-sheet .qt-cell-menu,
3313
+ .qt-sheet .qt-op-pop,
3314
+ .qt-sheet .qt-auto-refresh-popover,
3315
+ .qt-sheet .qt-value-picker-pop {
3316
+ position: static !important;
3317
+ inset: auto !important;
3318
+ width: 100% !important;
3319
+ min-width: 0;
3320
+ max-height: none;
3321
+ min-height: 0;
3322
+ overflow-y: auto;
3323
+ border: 0;
3324
+ border-radius: 0;
3325
+ box-shadow: none;
3326
+ padding: 8px 12px;
3327
+ overscroll-behavior: contain;
3328
+ }
3329
+ .qt-sheet .qt-op-pop {
3330
+ display: grid;
3331
+ font-size: 15px;
3332
+ }
3333
+ .qt-sheet .qt-op-cell {
3334
+ padding: 6px 8px;
3335
+ min-height: 44px;
3336
+ font-size: 15px;
3337
+ }
3338
+ .qt-sheet .qt-auto-refresh-popover {
3339
+ display: flex;
3340
+ gap: 8px;
3341
+ }
3342
+ .qt-sheet .qt-auto-refresh-field {
3343
+ flex-wrap: wrap;
3344
+ gap: 6px;
3345
+ }
3346
+ .qt-sheet .qt-auto-refresh-select {
3347
+ font-size: 16px;
3348
+ width: auto;
3349
+ flex: 1;
3350
+ }
3351
+ .qt-sheet .qt-value-picker-pop {
3352
+ gap: 6px;
3353
+ }
3354
+ .qt-sheet .qt-value-picker-pop > input {
3355
+ font-size: 16px;
3356
+ padding: 6px 10px;
3357
+ flex-shrink: 0;
3358
+ }
3359
+ .qt-sheet .qt-value-picker-list button {
3360
+ min-height: 44px;
3361
+ font-size: 16px;
3362
+ padding: 6px 8px;
3363
+ }
3364
+ .qt-filter-editor .qt-pred {
3365
+ display: flex;
3366
+ flex-wrap: wrap;
3367
+ gap: 6px;
3368
+ padding-bottom: 8px;
3369
+ margin-bottom: 8px;
3370
+ border-bottom: 1px solid var(--qt-border-subtle);
3371
+ }
3372
+ .qt-filter-editor .qt-pred > .qt-chip-field {
3373
+ flex: 1 0 100%;
3374
+ font-size: 15px;
3375
+ }
3376
+ .qt-filter-editor > p {
3377
+ margin: 6px 0;
3378
+ }
3379
+ .qt-filter-editor .qt-autocomplete,
3380
+ .qt-filter-editor .qt-value-picker {
3381
+ flex: 1;
3382
+ min-width: 0;
3383
+ }
3384
+ .qt-filter-editor .qt-chip-val {
3385
+ width: 100% !important;
3386
+ min-width: 0;
3387
+ min-height: 44px;
3388
+ font-size: 16px;
3389
+ padding: 6px 8px;
3390
+ }
3391
+ .qt-filter-editor .qt-chip-op-btn {
3392
+ min-height: 44px;
3393
+ font-size: 16px;
3394
+ padding: 6px 8px;
3395
+ }
3396
+ .qt-filter-editor .qt-chip-x {
3397
+ min-width: 44px;
3398
+ min-height: 44px;
3399
+ }
3400
+ .qt-filter-combine {
3401
+ display: flex;
3402
+ flex-direction: column;
3403
+ gap: 6px;
3404
+ font-size: 14px;
3405
+ }
3406
+ .qt-filter-combine select {
3407
+ width: 100%;
3408
+ font-size: 16px;
3409
+ }
3410
+ .qt-mobile-form {
3411
+ display: grid;
3412
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3413
+ gap: 8px;
3414
+ min-width: 0;
3415
+ }
3416
+ .qt-mobile-form-field {
3417
+ display: flex;
3418
+ flex-direction: column;
3419
+ gap: 4px;
3420
+ min-width: 0;
3421
+ margin: 0;
3422
+ }
3423
+ .qt-mobile-form-field > span:first-child {
3424
+ color: var(--qt-muted);
3425
+ font-size: 12px;
3426
+ font-weight: 600;
3427
+ }
3428
+ .qt-mobile-form-field--wide,
3429
+ .qt-mobile-form-actions,
3430
+ .qt-mobile-form-hint,
3431
+ .qt-mobile-form > .qt-mobile-form-remove {
3432
+ grid-column: 1 / -1;
3433
+ }
3434
+ .qt-mobile-form select,
3435
+ .qt-mobile-form input,
3436
+ .qt-mobile-form .qt-value-picker,
3437
+ .qt-mobile-form .qt-autocomplete,
3438
+ .qt-mobile-form .qt-op-wrap {
3439
+ width: 100% !important;
3440
+ min-width: 0;
3441
+ max-width: 100%;
3442
+ box-sizing: border-box;
3443
+ }
3444
+ .qt-mobile-form select,
3445
+ .qt-mobile-form input,
3446
+ .qt-mobile-form .qt-chip-val,
3447
+ .qt-mobile-form .qt-chip-op-btn {
3448
+ min-height: 36px;
3449
+ padding: 0 8px;
3450
+ font-size: 16px;
3451
+ border: 1px solid var(--qt-border);
3452
+ border-radius: 8px;
3453
+ background: var(--qt-bg, #fff);
3454
+ color: var(--qt-text);
3455
+ }
3456
+ .qt-mobile-form .qt-chip-op-btn {
3457
+ width: 100%;
3458
+ height: 100%;
3459
+ white-space: normal;
3460
+ overflow-wrap: anywhere;
3461
+ text-align: left;
3462
+ }
3463
+ .qt-mobile-form .qt-op-wrap {
3464
+ display: flex;
3465
+ flex: 1;
3466
+ }
3467
+ .qt-mobile-form-inline,
3468
+ .qt-mobile-form-actions {
3469
+ display: flex;
3470
+ align-items: center;
3471
+ gap: 6px;
3472
+ min-width: 0;
3473
+ }
3474
+ .qt-mobile-form-inline input {
3475
+ flex: 1;
3476
+ }
3477
+ .qt-mobile-form-inline .qt-btn {
3478
+ flex-shrink: 0;
3479
+ min-width: 44px;
3480
+ min-height: 44px;
3481
+ }
3482
+ .qt-mobile-form-actions {
3483
+ justify-content: space-between;
3484
+ border-top: 1px solid var(--qt-border-subtle);
3485
+ }
3486
+ .qt-mobile-form-remove {
3487
+ min-height: 32px;
3488
+ padding: 0 8px;
3489
+ border: 0;
3490
+ border-radius: 8px;
3491
+ background: transparent;
3492
+ color: var(--qt-fail-fg);
3493
+ font: inherit;
3494
+ font-size: 14px;
3495
+ text-align: left;
3496
+ touch-action: manipulation;
3497
+ }
3498
+ .qt-sheet .qt-mobile-form-remove {
3499
+ min-height: 32px;
3500
+ }
3501
+ .qt-mobile-form > .qt-mobile-form-remove {
3502
+ border-top: 1px solid var(--qt-border-subtle);
3503
+ border-radius: 0;
3504
+ }
3505
+ .qt-mobile-form-hint {
3506
+ margin: 0;
3507
+ color: var(--qt-muted);
3508
+ font-size: 12px;
3509
+ line-height: 1.4;
3510
+ }
3511
+ .qt-mobile-form .qt-chip-agg-by {
3512
+ display: flex;
3513
+ align-items: center;
3514
+ flex-wrap: wrap;
3515
+ gap: 6px;
3516
+ min-width: 0;
3517
+ }
3518
+ .qt-mobile-form .qt-chip-agg-group {
3519
+ display: inline-flex;
3520
+ align-items: center;
3521
+ min-height: 32px;
3522
+ max-width: 100%;
3523
+ padding-left: 8px;
3524
+ border: 1px solid var(--qt-border);
3525
+ border-radius: 8px;
3526
+ font-size: 14px;
3527
+ }
3528
+ .qt-mobile-form .qt-chip-agg-group-label {
3529
+ min-width: 0;
3530
+ overflow-wrap: anywhere;
3531
+ }
3532
+ .qt-sheet .qt-mobile-form .qt-chip-x,
3533
+ .qt-sheet .qt-mobile-form .qt-chip-agg-add {
3534
+ flex-shrink: 0;
3535
+ min-width: 32px;
3536
+ min-height: 32px;
3537
+ padding-top: 0;
3538
+ padding-bottom: 0;
3539
+ }
3540
+ .qt-mobile-predicate + p {
3541
+ padding-top: 6px;
3542
+ border-top: 1px solid var(--qt-border-subtle);
3543
+ font-size: 12px;
3544
+ font-weight: 600;
3545
+ }
3546
+ .qt-filter-combine {
3547
+ margin-top: 8px;
3548
+ font-size: 12px;
3549
+ }
3550
+ .qt-filter-combine select {
3551
+ min-width: 0;
3552
+ min-height: 44px;
3553
+ padding: 6px 8px;
3554
+ border: 1px solid var(--qt-border);
3555
+ border-radius: 8px;
3556
+ background: var(--qt-bg, #fff);
3557
+ color: var(--qt-text);
3558
+ }
3559
+ .qt-metric--gb0 {
3560
+ flex: 1 1 calc(50% - 4px);
3561
+ padding: 8px;
3562
+ }
3563
+ .qt-metric--gb1,
3564
+ .qt-metric--gb2,
3565
+ .qt-metric--gb3 {
3566
+ flex: 1 0 100%;
3567
+ padding: 8px;
3568
+ }
3569
+ .qt-metric-head {
3570
+ min-width: 0;
3571
+ overflow-wrap: anywhere;
3572
+ }
3573
+ .qt-metric-big-value {
3574
+ font-size: 24px;
3575
+ overflow-wrap: anywhere;
3576
+ }
3577
+ .qt-sheet.qt-select-editor {
3578
+ height: 100%;
3579
+ }
3580
+ .qt-sheet.qt-select-editor--selected {
3581
+ height: auto;
3582
+ }
3583
+ .qt-sheet .qt-select-editor-header {
3584
+ padding: 0 12px 6px;
3585
+ }
3586
+ .qt-sheet .qt-select-editor-header h2 {
3587
+ margin: 0;
3588
+ font-size: 18px;
3589
+ }
3590
+ .qt-sheet .qt-select-editor-header p {
3591
+ display: none;
3592
+ }
3593
+ .qt-editor-mobile-nav {
3594
+ display: flex;
3595
+ gap: 4px;
3596
+ padding: 4px 8px;
3597
+ border-bottom: 1px solid var(--qt-border-subtle);
3598
+ flex-shrink: 0;
3599
+ }
3600
+ .qt-editor-mobile-nav .qt-btn {
3601
+ flex: 1;
3602
+ justify-content: center;
3603
+ font-size: 13px;
3604
+ border: 0;
3605
+ background: transparent;
3606
+ }
3607
+ .qt-editor-mobile-nav .qt-btn[aria-pressed=true] {
3608
+ color: var(--qt-accent);
3609
+ background: var(--qt-accent-bg);
3610
+ border-radius: 8px;
3611
+ font-weight: 650;
3612
+ }
3613
+ .qt-sheet .qt-select-editor-body {
3614
+ display: block;
3615
+ flex: 1;
3616
+ min-height: 0;
3617
+ overflow-y: auto;
3618
+ overscroll-behavior: contain;
3619
+ }
3620
+ .qt-sheet .qt-selected-panel,
3621
+ .qt-sheet .qt-catalogue-panel,
3622
+ .qt-sheet .qt-column-workbench {
3623
+ display: none;
3624
+ max-height: none;
3625
+ overflow: visible;
3626
+ border: 0;
3627
+ padding: 8px 12px;
3628
+ }
3629
+ .qt-select-editor-body--selected > .qt-selected-panel,
3630
+ .qt-select-editor-body--catalogue > .qt-catalogue-panel,
3631
+ .qt-select-editor-body--preview > .qt-column-workbench {
3632
+ display: block;
3633
+ }
3634
+ .qt-sheet .qt-editor-move {
3635
+ display: none;
3636
+ }
3637
+ .qt-sheet .qt-selected-panel > h3 {
3638
+ display: none;
3639
+ }
3640
+ .qt-sheet .qt-editor-columns {
3641
+ margin: 0 0 4px;
3642
+ padding: 0;
3643
+ overflow: visible;
3644
+ }
3645
+ .qt-sheet .qt-editor-columns li {
3646
+ min-height: 32px;
3647
+ margin-bottom: 2px;
3648
+ padding: 0;
3649
+ gap: 4px;
3650
+ }
3651
+ .qt-sheet .qt-editor-columns li > span[aria-hidden] {
3652
+ display: none;
3653
+ }
3654
+ .qt-sheet .qt-icon-btn,
3655
+ .qt-sheet .qt-column-name {
3656
+ min-width: 32px;
3657
+ min-height: 32px;
3658
+ padding-top: 0;
3659
+ padding-bottom: 0;
3660
+ }
3661
+ .qt-sheet .qt-input,
3662
+ .qt-sheet textarea,
3663
+ .qt-sheet .qt-preview-controls select,
3664
+ .qt-sheet .qt-preview-controls input {
3665
+ max-width: 100%;
3666
+ font-size: 16px;
3667
+ padding: 6px 8px;
3668
+ }
3669
+ .qt-sheet .qt-catalogue-list {
3670
+ max-height: none;
3671
+ }
3672
+ .qt-sheet .qt-select-editor-footer {
3673
+ padding: 8px 12px;
3674
+ gap: 6px;
3675
+ flex-shrink: 0;
3676
+ background: var(--qt-bg, #fff);
3677
+ }
3678
+ .qt-sheet .qt-select-editor-footer > span {
3679
+ flex: 1 0 100%;
3680
+ }
3681
+ .qt-sheet .qt-select-editor-footer > button {
3682
+ flex: 1;
3683
+ justify-content: center;
3684
+ }
3685
+ .qt-selection-toolbar {
3686
+ position: sticky;
3687
+ bottom: 0;
3688
+ z-index: 5;
3689
+ padding-bottom: max(10px, env(safe-area-inset-bottom));
3690
+ box-shadow: 0 -4px 16px #0001;
3691
+ }
3692
+ .qt-sheet .qt-saved-item {
3693
+ padding: 6px 0;
3694
+ }
3695
+ .qt-sheet .qt-cm-header {
3696
+ padding: 4px 8px 6px;
3697
+ }
3698
+ .qt-sheet .qt-cm-item {
3699
+ padding: 6px 8px;
3700
+ }
3701
+ .qt-sheet .qt-preview-controls {
3702
+ padding-top: 8px;
3703
+ margin-top: 8px;
3704
+ gap: 6px;
3705
+ }
3706
+ .qt-sheet .qt-definition-actions {
3707
+ margin-top: 6px;
3708
+ margin-bottom: 6px;
3709
+ gap: 6px;
3710
+ }
3711
+ .qt-sheet .qt-saved-name {
3712
+ overflow-wrap: anywhere;
3713
+ }
3714
+ .qt-sheet .qt-cm-value {
3715
+ white-space: normal;
3716
+ overflow-wrap: anywhere;
3717
+ }
3718
+ }
3719
+ @keyframes qt-sheet-enter {
3720
+ from {
3721
+ transform: translateY(32px);
3722
+ opacity: 0.6;
3723
+ }
3724
+ to {
3725
+ transform: translateY(0);
3726
+ opacity: 1;
3727
+ }
3728
+ }
3729
+ @media (prefers-reduced-motion: reduce) {
3730
+ .qt-modal-surface.qt-sheet {
3731
+ animation: none;
3732
+ }
3733
+ }
3734
+ .qt-set-backdrop {
3735
+ position: fixed;
3736
+ inset: 0;
3737
+ z-index: 100;
3738
+ display: flex;
3739
+ align-items: center;
3740
+ justify-content: center;
3741
+ background: rgba(0, 0, 0, 0.25);
3742
+ }
3743
+ .qt-set-editor {
3744
+ position: fixed;
3745
+ box-sizing: border-box;
3746
+ width: min(440px, calc(100vw - 32px));
3747
+ max-height: calc(100dvh - 32px);
3748
+ overflow: auto;
3749
+ background: var(--qt-header-bg);
3750
+ color: var(--qt-text);
3751
+ border: 1px solid var(--qt-border);
3752
+ border-radius: var(--qt-radius);
3753
+ padding: 16px;
3754
+ display: flex;
3755
+ flex-direction: column;
3756
+ gap: 12px;
3757
+ }
3758
+ .qt-set-editor h3 {
3759
+ margin: 0;
3760
+ }
3761
+ .qt-set-editor select,
3762
+ .qt-set-editor > input {
3763
+ width: 100%;
3764
+ box-sizing: border-box;
3765
+ }
3766
+ .qt-set-selected,
3767
+ .qt-set-actions {
3768
+ display: flex;
3769
+ flex-wrap: wrap;
3770
+ gap: 8px;
3771
+ }
3772
+ .qt-set-actions {
3773
+ justify-content: flex-end;
3774
+ }
3775
+ .qt-set-options {
3776
+ overflow: auto;
3777
+ max-height: 240px;
3778
+ }
3779
+ .qt-set-option {
3780
+ display: flex;
3781
+ align-items: center;
3782
+ gap: 8px;
3783
+ padding: 6px;
3784
+ }
3785
+ .qt-set-option small {
3786
+ color: var(--qt-muted);
3787
+ }
3788
+ .qt-set-tag {
3789
+ display: inline-flex;
3790
+ align-items: center;
3791
+ gap: 4px;
3792
+ }
3793
+ @media (max-width: 600px) {
3794
+ .qt-set-editor {
3795
+ top: auto !important;
3796
+ left: 0 !important;
3797
+ bottom: 0;
3798
+ width: 100%;
3799
+ max-height: 85dvh;
3800
+ border-radius: var(--qt-radius) var(--qt-radius) 0 0;
3801
+ }
3802
+ }
3803
+
3804
+ /* src/metrics.css */
3805
+ .qt-metric.qt-metric {
3806
+ color: var(--qt-metric-text, var(--qt-text, #24292f));
3807
+ background: var(--qt-metric-surface, var(--qt-bg, #fff));
3808
+ max-width: 100%;
3809
+ box-sizing: border-box;
3810
+ overflow: auto;
3811
+ }
3812
+ .qt-metric.qt-metric--chart {
3813
+ flex: 1 1 28rem;
3814
+ display: flex;
3815
+ flex-direction: column;
3816
+ width: 28rem;
3817
+ min-height: 20rem;
3818
+ }
3819
+ .qt-metric-chart-layout {
3820
+ display: flex;
3821
+ flex: 1 0 12rem;
3822
+ min-height: 8rem;
3823
+ gap: 0.5rem;
3824
+ min-width: 0;
3825
+ }
3826
+ .qt-metric-plot {
3827
+ flex: 1;
3828
+ min-width: 0;
3829
+ position: relative;
3830
+ min-height: 8rem;
3831
+ }
3832
+ .qt-metric-plot svg {
3833
+ display: block;
3834
+ width: 100%;
3835
+ height: 100%;
3836
+ overflow: hidden;
3837
+ }
3838
+ .qt-metric-axis {
3839
+ fill: var(--qt-metric-muted, var(--qt-muted, #68717d));
3840
+ font: 0.6875rem system-ui, sans-serif;
3841
+ }
3842
+ .qt-metric-grid {
3843
+ stroke: var(--qt-metric-grid, var(--qt-border, #d8dee4));
3844
+ stroke-width: 1;
3845
+ }
3846
+ .qt-metric-mark {
3847
+ outline: none;
3848
+ }
3849
+ .qt-metric-mark:focus-visible {
3850
+ outline: 2px solid var(--qt-metric-accent, var(--qt-accent, #3979c3));
3851
+ outline-offset: 2px;
3852
+ }
3853
+ .qt-metric-legend {
3854
+ display: flex;
3855
+ flex-direction: column;
3856
+ list-style: none;
3857
+ gap: 0.4rem;
3858
+ padding: 0;
3859
+ margin: 0;
3860
+ max-width: 35%;
3861
+ max-height: 16rem;
3862
+ overflow: auto;
3863
+ font-size: 0.75rem;
3864
+ }
3865
+ .qt-metric-legend li {
3866
+ display: flex;
3867
+ align-items: baseline;
3868
+ gap: 0.35rem;
3869
+ overflow-wrap: anywhere;
3870
+ }
3871
+ .qt-metric-swatch {
3872
+ display: inline-block;
3873
+ flex-shrink: 0;
3874
+ width: 0.6rem;
3875
+ height: 0.6rem;
3876
+ border-radius: 0.1rem;
3877
+ }
3878
+ .qt-metric-legend-left {
3879
+ flex-direction: row-reverse;
3880
+ }
3881
+ .qt-metric-legend-top {
3882
+ flex-direction: column-reverse;
3883
+ }
3884
+ .qt-metric-legend-bottom {
3885
+ flex-direction: column;
3886
+ }
3887
+ .qt-metric-legend-top .qt-metric-legend,
3888
+ .qt-metric-legend-bottom .qt-metric-legend {
3889
+ flex-direction: row;
3890
+ flex-wrap: wrap;
3891
+ max-width: 100%;
3892
+ max-height: 4rem;
3893
+ }
3894
+ .qt-metric-note {
3895
+ color: var(--qt-metric-muted, var(--qt-muted, #68717d));
3896
+ font-size: 0.6875rem;
3897
+ margin: 0.4rem 0;
3898
+ }
3899
+ .qt-metric-tooltip {
3900
+ white-space: pre-line;
3901
+ overflow-wrap: anywhere;
3902
+ padding: 0.5rem 0.625rem;
3903
+ background: var(--qt-metric-surface, var(--qt-bg, #fff));
3904
+ color: var(--qt-metric-text, var(--qt-text, #24292f));
3905
+ border: 1px solid var(--qt-metric-grid, var(--qt-border, #d8dee4));
3906
+ border-radius: 0.25rem;
3907
+ font-size: 0.75rem;
3908
+ box-shadow: 0 0.15rem 0.5rem #0002;
3909
+ }
3910
+ .qt-metric-message {
3911
+ font-size: 0.8125rem;
3912
+ padding: 0.75rem;
3913
+ }
3914
+ .qt-metric-format-error,
3915
+ .qt-metrics-error {
3916
+ color: var(--qt-metric-error, var(--qt-danger, #c23934));
3917
+ }
3918
+ .qt-metric.qt-metric {
3919
+ position: relative;
3920
+ }
3921
+ .qt-metric-tooltip {
3922
+ position: absolute;
3923
+ z-index: 2;
3924
+ inset-inline: 0.5rem;
3925
+ bottom: 2rem;
3926
+ pointer-events: none;
3927
+ max-height: 80%;
3928
+ overflow: auto;
3929
+ }
3930
+ .qt-metric .qt-metric-big-value,
3931
+ .qt-metric .qt-metric-bar-value {
3932
+ color: var(--qt-metric-text, var(--qt-text, #24292f));
3933
+ }
3934
+ .qt-metric .qt-metric-bar-fill {
3935
+ background: var(--qt-metric-accent, var(--qt-accent, #3979c3));
3936
+ }
3937
+ .qt-metric .qt-metric-pivot thead th,
3938
+ .qt-metric .qt-metric-flat thead th {
3939
+ background: var(--qt-metric-surface, var(--qt-header-bg, #fff));
3940
+ }
3941
+ .qt-metrics {
3942
+ min-width: 0;
3943
+ overflow-x: auto;
3944
+ }
3945
+ .qt-metric.qt-metric {
3946
+ border-radius: 8px;
3947
+ padding: 10px 12px;
3948
+ box-shadow: none;
3949
+ gap: 6px;
3950
+ }
3951
+ .qt-metric .qt-metric-head {
3952
+ flex-shrink: 0;
3953
+ align-items: baseline;
3954
+ }
3955
+ .qt-metric .qt-metric-title {
3956
+ font-size: 12px;
3957
+ font-weight: 600;
3958
+ }
3959
+ .qt-metric .qt-metric-by {
3960
+ font-size: 10px;
3961
+ }
3962
+ .qt-metric .qt-metric-big {
3963
+ text-align: center;
3964
+ align-items: center;
3965
+ gap: 6px;
3966
+ padding: 4px 0;
3967
+ }
3968
+ .qt-metric .qt-metric-big-value {
3969
+ font-size: clamp(24px, 2.125rem, 34px);
3970
+ font-weight: 600;
3971
+ line-height: 1.2;
3972
+ }
3973
+ .qt-metric .qt-metric-big-sub {
3974
+ font-size: 11px;
3975
+ color: var(--qt-metric-muted, var(--qt-muted));
3976
+ }
3977
+ .qt-metric .qt-metric-pivot,
3978
+ .qt-metric .qt-metric-flat {
3979
+ width: 100%;
3980
+ }
3981
+ .qt-metric .qt-metric-pivot thead th,
3982
+ .qt-metric .qt-metric-flat thead th {
3983
+ background: var(--qt-header-bg, #f6f8fa);
3984
+ color: var(--qt-metric-muted, var(--qt-muted));
3985
+ font-weight: 500;
3986
+ }
3987
+ .qt-metric .qt-metric-pivot-wrap {
3988
+ min-height: 0;
3989
+ overflow: auto;
3990
+ }
3991
+ .qt-metric .qt-metric-legend {
3992
+ font-size: 10px;
3993
+ gap: 6px;
3994
+ max-width: 40%;
3995
+ }
3996
+ .qt-metric .qt-metric-legend li {
3997
+ align-items: center;
3998
+ gap: 5px;
3999
+ }
4000
+ .qt-metric .qt-metric-legend .qt-metric-swatch {
4001
+ width: 8px;
4002
+ height: 8px;
4003
+ border-radius: 2px;
4004
+ }
4005
+ .qt-metric-legend-top .qt-metric-legend,
4006
+ .qt-metric-legend-bottom .qt-metric-legend {
4007
+ max-width: 100%;
4008
+ }
4009
+ .qt-metric-loading {
4010
+ padding: 12px;
4011
+ }
4012
+ .qt-metric-empty {
4013
+ flex: 1;
4014
+ display: grid;
4015
+ place-items: center;
4016
+ font-style: normal;
4017
+ }
4018
+ .qt-metric .qt-metrics-error {
4019
+ margin: 6px 0;
4020
+ padding: 10px;
4021
+ background: var(--qt-fail-bg, #ffebe9);
4022
+ border-radius: 6px;
4023
+ font-size: 11px;
4024
+ overflow-wrap: anywhere;
4025
+ }
4026
+ .qt-metrics {
4027
+ position: relative;
4028
+ }
4029
+ .qt-metric.qt-metric {
4030
+ position: relative;
4031
+ }
4032
+ .qt-metric-edit,
4033
+ .qt-metrics-edit {
4034
+ position: absolute;
4035
+ right: 0.35rem;
4036
+ top: 0.35rem;
4037
+ z-index: 1;
4038
+ opacity: 0;
4039
+ pointer-events: none;
4040
+ background: transparent;
4041
+ }
4042
+ .qt-btn.qt-metric-edit,
4043
+ .qt-btn.qt-metrics-edit {
4044
+ color: var(--qt-metric-muted, var(--qt-muted, #8c959f));
4045
+ border: 1px dotted var(--qt-border, #d0d7de);
4046
+ }
4047
+ .qt-btn.qt-metric-edit:hover,
4048
+ .qt-btn.qt-metrics-edit:hover {
4049
+ color: var(--qt-metric-muted, var(--qt-muted, #8c959f));
4050
+ border-color: var(--qt-border, #d0d7de);
4051
+ background: var(--qt-header-bg, #f6f8fa);
4052
+ }
4053
+ .qt-metrics-edit {
4054
+ top: -0.75rem;
4055
+ z-index: 3;
4056
+ background: var(--qt-header-bg, #f6f8fa);
4057
+ }
4058
+ .qt-metric:hover > .qt-metric-edit,
4059
+ .qt-metric:focus-within > .qt-metric-edit,
4060
+ .qt-metrics:hover > .qt-metrics-edit,
4061
+ .qt-metrics:focus-within > .qt-metrics-edit {
4062
+ opacity: 1;
4063
+ pointer-events: auto;
4064
+ }
4065
+ .qt-metric:has(> .qt-metric-edit) .qt-metric-head {
4066
+ padding-right: 1.75rem;
4067
+ }
4068
+ @media (hover: none) {
4069
+ .qt-metric-edit,
4070
+ .qt-metrics-edit {
4071
+ opacity: 1;
4072
+ pointer-events: auto;
4073
+ }
4074
+ }
4075
+ .qt-request-activity {
4076
+ padding: 0.75rem;
4077
+ margin-block: 0.5rem;
4078
+ border: 1px solid var(--qt-border, #d0d7de);
4079
+ border-radius: 0.5rem;
4080
+ font-size: 0.8rem;
4081
+ }
4082
+ .qt-request-activity-head {
4083
+ display: flex;
4084
+ align-items: center;
4085
+ gap: 0.75rem;
4086
+ margin-bottom: 0.5rem;
4087
+ }
4088
+ .qt-request-activity-head .qt-btn {
4089
+ margin-left: auto;
4090
+ }
4091
+ .qt-request-activity-scroll {
4092
+ overflow: auto;
4093
+ max-height: 18rem;
4094
+ }
4095
+ .qt-request-activity table {
4096
+ width: 100%;
4097
+ text-align: left;
4098
+ border-collapse: collapse;
4099
+ }
4100
+ .qt-request-activity th,
4101
+ .qt-request-activity td {
4102
+ padding: 0.4rem 0.6rem;
4103
+ border-bottom: 1px solid var(--qt-border, #d0d7de);
4104
+ overflow-wrap: anywhere;
4105
+ }
4106
+ .qt-request-activity [data-status=error] {
4107
+ color: var(--qt-danger, #cf222e);
4108
+ }
4109
+
4110
+ /* src/metricsEditor.css */
4111
+ .qt-metrics-editor.qt-modal {
4112
+ width: min(1560px, calc(100vw - 48px));
4113
+ height: min(900px, calc(100dvh - 48px));
4114
+ max-width: calc(100vw - 48px);
4115
+ max-height: calc(100dvh - 48px);
4116
+ min-width: min(760px, calc(100vw - 48px));
4117
+ min-height: min(400px, calc(100dvh - 48px));
4118
+ border: 1px solid var(--qt-border, #d0d7de);
4119
+ border-radius: 12px;
4120
+ box-shadow: 0 24px 90px #1f23283b;
4121
+ padding: 0;
4122
+ resize: both;
4123
+ overflow: hidden;
4124
+ display: flex;
4125
+ flex-direction: column;
4126
+ box-sizing: border-box;
4127
+ font-size: 12px;
4128
+ line-height: 1.5;
4129
+ }
4130
+ .qt-metrics-editor *,
4131
+ .qt-metrics-editor *::before,
4132
+ .qt-metrics-editor *::after {
4133
+ box-sizing: border-box;
4134
+ }
4135
+ .qt-metrics-editor :is(input, select, textarea) {
4136
+ font: inherit;
4137
+ font-weight: 400;
4138
+ color: inherit;
4139
+ background: var(--qt-bg, #fff);
4140
+ border: 1px solid var(--qt-border, #d0d7de);
4141
+ border-radius: 6px;
4142
+ padding: 6px 9px;
4143
+ min-width: 0;
4144
+ width: 100%;
4145
+ }
4146
+ .qt-metrics-editor :is(input, select) {
4147
+ min-height: 34px;
4148
+ }
4149
+ .qt-metrics-editor input[type=checkbox] {
4150
+ width: 14px;
4151
+ height: 14px;
4152
+ min-height: 0;
4153
+ margin: 0;
4154
+ padding: 0;
4155
+ accent-color: var(--qt-accent, #0969da);
4156
+ }
4157
+ .qt-metrics-editor button {
4158
+ font: inherit;
4159
+ }
4160
+ .qt-metrics-editor .qt-btn {
4161
+ height: auto;
4162
+ min-height: 30px;
4163
+ padding: 5px 9px;
4164
+ justify-content: center;
4165
+ white-space: nowrap;
4166
+ }
4167
+ .qt-metrics-editor button:disabled {
4168
+ cursor: default;
4169
+ opacity: 0.5;
4170
+ }
4171
+ .qt-metrics-editor .qt-btn:hover:not(:disabled) {
4172
+ background: var(--qt-header-bg, #f6f8fa);
4173
+ border-color: var(--qt-border, #d0d7de);
4174
+ }
4175
+ .qt-metrics-editor .qt-btn-primary {
4176
+ background: var(--qt-accent, #0969da);
4177
+ border-color: var(--qt-accent, #0969da);
4178
+ color: #fff;
4179
+ font-weight: 600;
4180
+ }
4181
+ .qt-metrics-editor .qt-btn-primary:hover:not(:disabled) {
4182
+ background: var(--qt-accent, #0969da);
4183
+ border-color: var(--qt-accent, #0969da);
4184
+ filter: brightness(0.9);
4185
+ }
4186
+ .qt-metrics-editor :is(input, select, textarea, button, summary, [role=separator]):focus-visible {
4187
+ outline: 2px solid var(--qt-accent, #0969da);
4188
+ outline-offset: 2px;
4189
+ }
4190
+ .qt-metrics-editor label {
4191
+ display: flex;
4192
+ flex-direction: column;
4193
+ gap: 6px;
4194
+ font-size: 12px;
4195
+ font-weight: 500;
4196
+ min-width: 0;
4197
+ }
4198
+ .qt-metrics-editor label:has(> input[type=checkbox]) {
4199
+ flex-direction: row;
4200
+ align-items: center;
4201
+ font-weight: 400;
4202
+ }
4203
+ .qt-metrics-editor-header {
4204
+ display: flex;
4205
+ align-items: center;
4206
+ flex-shrink: 0;
4207
+ gap: 18px;
4208
+ padding: 14px 20px;
4209
+ border-bottom: 1px solid var(--qt-border, #d0d7de);
4210
+ }
4211
+ .qt-metrics-editor-header h2 {
4212
+ margin: 0;
4213
+ font-size: 18px;
4214
+ font-weight: 600;
4215
+ white-space: nowrap;
4216
+ }
4217
+ .qt-metrics-editor-header > label {
4218
+ width: 142px;
4219
+ }
4220
+ .qt-metrics-editor-header select {
4221
+ background: var(--qt-header-bg, #f6f8fa);
4222
+ }
4223
+ .qt-metrics-editor-header .qt-metric-close {
4224
+ border: 0;
4225
+ background: transparent;
4226
+ width: 32px;
4227
+ padding: 0;
4228
+ font-size: 22px;
4229
+ font-weight: 400;
4230
+ }
4231
+ .qt-metrics-editor-context {
4232
+ display: flex;
4233
+ flex-wrap: wrap;
4234
+ flex-shrink: 0;
4235
+ gap: 16px;
4236
+ padding: 9px 22px;
4237
+ background: var(--qt-header-bg, #f6f8fa);
4238
+ color: var(--qt-muted, #656d76);
4239
+ font-size: 12px;
4240
+ border-bottom: 1px solid var(--qt-border, #d0d7de);
4241
+ }
4242
+ .qt-metrics-editor-context b {
4243
+ color: var(--qt-text, #1f2328);
4244
+ font-weight: 500;
4245
+ }
4246
+ .qt-metric-workspace {
4247
+ display: grid;
4248
+ grid-template-rows: minmax(0, 1fr);
4249
+ flex: 1;
4250
+ min-height: 0;
4251
+ overflow: auto;
4252
+ }
4253
+ .qt-metric-workspace > :is(aside, section) {
4254
+ padding: 18px;
4255
+ overflow: auto;
4256
+ overscroll-behavior: contain;
4257
+ min-height: 0;
4258
+ min-width: 0;
4259
+ }
4260
+ .qt-metric-workspace h3 {
4261
+ font-size: 13px;
4262
+ line-height: 20px;
4263
+ margin: 0 0 16px;
4264
+ font-weight: 600;
4265
+ color: var(--qt-text, #1f2328);
4266
+ }
4267
+ .qt-metric-workspace > .qt-metric-library,
4268
+ .qt-metric-workspace > .qt-metric-reference {
4269
+ background: var( --qt-editor-library-bg, color-mix(in srgb, var(--qt-bg, #fff) 60%, var(--qt-header-bg, #f6f8fa)) );
4270
+ padding-inline: 14px;
4271
+ }
4272
+ .qt-metric-pane-separator {
4273
+ position: relative;
4274
+ background: var(--qt-header-bg, #f6f8fa);
4275
+ border-inline: 1px solid var(--qt-border, #d0d7de);
4276
+ cursor: col-resize;
4277
+ touch-action: none;
4278
+ }
4279
+ .qt-metric-pane-separator::after {
4280
+ content: "";
4281
+ position: absolute;
4282
+ width: 2px;
4283
+ height: 28px;
4284
+ border-radius: 2px;
4285
+ background: var(--qt-border, #d0d7de);
4286
+ top: calc(50% - 14px);
4287
+ left: 1px;
4288
+ }
4289
+ .qt-metric-pane-separator:is(:hover, :focus-visible) {
4290
+ background: var(--qt-accent-bg, #ddf4ff);
4291
+ }
4292
+ .qt-metric-pane-separator:focus-visible {
4293
+ outline-offset: -2px;
4294
+ }
4295
+ .qt-metric-library h3 {
4296
+ font-size: 11px;
4297
+ text-transform: uppercase;
4298
+ letter-spacing: 0.06em;
4299
+ color: var(--qt-muted, #656d76);
4300
+ }
4301
+ .qt-metric-library .qt-reorder-list {
4302
+ padding: 0;
4303
+ margin: 0 0 12px;
4304
+ overflow: visible;
4305
+ }
4306
+ .qt-metric-library .qt-reorder-item {
4307
+ position: relative;
4308
+ border: 1px solid transparent;
4309
+ border-radius: 7px;
4310
+ padding: 0;
4311
+ margin: 4px 0;
4312
+ min-height: 0;
4313
+ display: flex;
4314
+ gap: 0;
4315
+ background: transparent;
4316
+ transition: background-color 0.12s, border-color 0.12s;
4317
+ }
4318
+ .qt-metric-library-chip {
4319
+ width: 100%;
4320
+ border: 0;
4321
+ background: transparent;
4322
+ color: inherit;
4323
+ text-align: start;
4324
+ padding: 9px 26px;
4325
+ display: flex;
4326
+ flex-direction: column;
4327
+ gap: 3px;
4328
+ min-height: 54px;
4329
+ cursor: pointer;
4330
+ border-radius: inherit;
4331
+ }
4332
+ .qt-metric-library-chip strong {
4333
+ font-size: 12px;
4334
+ font-weight: 600;
4335
+ overflow-wrap: anywhere;
4336
+ }
4337
+ .qt-metric-library-chip span {
4338
+ font-size: 11px;
4339
+ color: var(--qt-muted, #656d76);
4340
+ }
4341
+ .qt-metric-dirty-dot {
4342
+ display: inline-block;
4343
+ vertical-align: middle;
4344
+ width: 5px;
4345
+ height: 5px;
4346
+ border-radius: 50%;
4347
+ margin-inline-start: 6px;
4348
+ background: var(--qt-accent, #0969da);
4349
+ }
4350
+ .qt-metric-library .qt-reorder-item:is(:hover, :focus-within) {
4351
+ background: var(--qt-cell-hover, #f0f7ff);
4352
+ border-color: var(--qt-border-subtle, #eaeef2);
4353
+ }
4354
+ .qt-metric-library .qt-reorder-item.qt-metric-library-selected {
4355
+ border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
4356
+ background: var(--qt-accent-bg, #ddf4ff);
4357
+ }
4358
+ .qt-metric-library .qt-reorder-handle {
4359
+ position: absolute;
4360
+ inset-inline-start: 3px;
4361
+ top: 10px;
4362
+ z-index: 1;
4363
+ opacity: 0;
4364
+ }
4365
+ .qt-metrics-editor .qt-reorder-handle {
4366
+ width: 20px;
4367
+ min-width: 20px;
4368
+ min-height: 30px;
4369
+ padding: 0;
4370
+ border-radius: 4px;
4371
+ transition: opacity 0.12s;
4372
+ }
4373
+ .qt-metrics-editor .qt-reorder-handle .qt-icon {
4374
+ width: 12px;
4375
+ height: 12px;
4376
+ }
4377
+ .qt-metric-library .qt-reorder-item:is(:hover, :focus-within, .qt-metric-library-selected) > .qt-reorder-handle {
4378
+ opacity: 1;
4379
+ }
4380
+ .qt-metric-library .qt-metric-create {
4381
+ width: 100%;
4382
+ color: var(--qt-accent, #0969da);
4383
+ border-style: dashed;
4384
+ background: transparent;
4385
+ }
4386
+ .qt-metric-actions {
4387
+ position: absolute;
4388
+ top: 10px;
4389
+ inset-inline-end: 5px;
4390
+ z-index: 5;
4391
+ opacity: 0;
4392
+ transition: opacity 0.12s;
4393
+ }
4394
+ .qt-metric-actions summary {
4395
+ list-style: none;
4396
+ cursor: pointer;
4397
+ padding: 2px 4px;
4398
+ font-size: 18px;
4399
+ line-height: 24px;
4400
+ border-radius: 4px;
4401
+ }
4402
+ .qt-metric-actions summary::-webkit-details-marker {
4403
+ display: none;
4404
+ }
4405
+ .qt-metric-actions summary:hover {
4406
+ background: var(--qt-header-bg, #f6f8fa);
4407
+ }
4408
+ .qt-metric-actions > div {
4409
+ position: absolute;
4410
+ inset-inline-end: 0;
4411
+ top: 30px;
4412
+ width: 155px;
4413
+ display: flex;
4414
+ flex-direction: column;
4415
+ padding: 5px;
4416
+ background: var(--qt-bg, #fff);
4417
+ border: 1px solid var(--qt-border, #d0d7de);
4418
+ box-shadow: 0 8px 25px #1f232833;
4419
+ border-radius: 7px;
4420
+ }
4421
+ .qt-metric-actions button {
4422
+ text-align: start;
4423
+ background: transparent;
4424
+ border: 0;
4425
+ color: inherit;
4426
+ padding: 7px 8px;
4427
+ border-radius: 4px;
4428
+ cursor: pointer;
4429
+ }
4430
+ .qt-metric-actions button:hover {
4431
+ background: var(--qt-header-bg, #f6f8fa);
4432
+ }
4433
+ .qt-metric-actions button.qt-metric-remove {
4434
+ color: var(--qt-fail-fg, #cf222e);
4435
+ }
4436
+ .qt-reorder-item:is(:hover, :focus-within, .qt-metric-library-selected) .qt-metric-actions,
4437
+ .qt-metric-actions[open] {
4438
+ opacity: 1;
4439
+ }
4440
+ .qt-metric-definition {
4441
+ display: flex;
4442
+ flex-direction: column;
4443
+ gap: 0;
4444
+ }
4445
+ .qt-metric-definition > label {
4446
+ margin-bottom: 18px;
4447
+ font-weight: 600;
4448
+ }
4449
+ .qt-metric-expression-heading {
4450
+ display: flex;
4451
+ align-items: center;
4452
+ justify-content: space-between;
4453
+ gap: 8px;
4454
+ font-size: 12px;
4455
+ margin-bottom: 8px;
4456
+ }
4457
+ .qt-metric-expression-heading strong {
4458
+ font-weight: 600;
4459
+ }
4460
+ .qt-metric-mode {
4461
+ display: flex;
4462
+ gap: 6px;
4463
+ }
4464
+ .qt-metric-mode button {
4465
+ border: 1px solid var(--qt-border, #d0d7de);
4466
+ border-radius: 6px;
4467
+ background: var(--qt-bg, #fff);
4468
+ color: inherit;
4469
+ font-size: 11px;
4470
+ min-height: 26px;
4471
+ padding: 3px 8px;
4472
+ cursor: pointer;
4473
+ }
4474
+ .qt-metric-mode button[aria-pressed=true] {
4475
+ background: var(--qt-accent-bg, #ddf4ff);
4476
+ border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
4477
+ color: var(--qt-accent, #0969da);
4478
+ }
4479
+ .qt-metric-basic {
4480
+ display: flex;
4481
+ gap: 8px;
4482
+ margin-bottom: 18px;
4483
+ }
4484
+ .qt-metric-basic select {
4485
+ flex: 1;
4486
+ width: 50%;
4487
+ }
4488
+ .qt-metrics-editor .qt-formula-layout {
4489
+ gap: 0;
4490
+ margin: 0 0 12px;
4491
+ flex-shrink: 0;
4492
+ }
4493
+ .qt-metrics-editor .qt-formula-input {
4494
+ font:
4495
+ 12px/1.8 ui-monospace,
4496
+ SFMono-Regular,
4497
+ Consolas,
4498
+ monospace;
4499
+ min-height: 104px;
4500
+ max-height: 260px;
4501
+ padding: 12px;
4502
+ }
4503
+ .qt-metrics-editor .qt-formula-tools {
4504
+ font-size: 10px;
4505
+ margin-top: 5px;
4506
+ }
4507
+ .qt-metric-definition > strong {
4508
+ font-size: 12px;
4509
+ font-weight: 600;
4510
+ margin: 0 0 8px;
4511
+ }
4512
+ .qt-metric-validation {
4513
+ color: var(--qt-pass-fg, #1a7f37);
4514
+ margin: 0 0 18px;
4515
+ font-size: 11px;
4516
+ }
4517
+ .qt-metric-settings {
4518
+ border: 0;
4519
+ border-top: 1px solid var(--qt-border-subtle, #eaeef2);
4520
+ border-radius: 0;
4521
+ flex-shrink: 0;
4522
+ }
4523
+ .qt-metric-settings > summary {
4524
+ cursor: pointer;
4525
+ padding: 12px 0;
4526
+ display: flex;
4527
+ align-items: center;
4528
+ gap: 8px;
4529
+ list-style: none;
4530
+ font-size: 12px;
4531
+ }
4532
+ .qt-metric-settings > summary::-webkit-details-marker {
4533
+ display: none;
4534
+ }
4535
+ .qt-metric-settings > summary::before {
4536
+ content: "\25b8";
4537
+ font-size: 10px;
4538
+ color: var(--qt-muted, #656d76);
4539
+ flex-shrink: 0;
4540
+ }
4541
+ .qt-metric-settings[open] > summary::before {
4542
+ content: "\25be";
4543
+ }
4544
+ .qt-metric-settings > summary strong {
4545
+ font-weight: 600;
4546
+ white-space: nowrap;
4547
+ }
4548
+ .qt-metric-settings > summary span {
4549
+ color: var(--qt-muted, #656d76);
4550
+ font-size: 10px;
4551
+ margin-inline-start: auto;
4552
+ max-width: 58%;
4553
+ text-align: end;
4554
+ white-space: nowrap;
4555
+ overflow: hidden;
4556
+ text-overflow: ellipsis;
4557
+ }
4558
+ .qt-metric-settings > div {
4559
+ padding: 0 0 12px;
4560
+ display: flex;
4561
+ flex-direction: column;
4562
+ gap: 10px;
4563
+ }
4564
+ .qt-metric-scope {
4565
+ display: flex;
4566
+ background: var(--qt-header-bg, #f6f8fa);
4567
+ border: 1px solid var(--qt-border, #d0d7de);
4568
+ padding: 3px;
4569
+ border-radius: 7px;
4570
+ gap: 3px;
4571
+ }
4572
+ .qt-metric-scope button {
4573
+ flex: 1;
4574
+ border: 0;
4575
+ border-radius: 4px;
4576
+ background: transparent;
4577
+ padding: 5px 8px;
4578
+ min-height: 30px;
4579
+ cursor: pointer;
4580
+ color: inherit;
4581
+ }
4582
+ .qt-metric-scope button[aria-pressed=true] {
4583
+ background: var(--qt-bg, #fff);
4584
+ box-shadow: 0 1px 3px #1f23281a;
4585
+ color: var(--qt-accent, #0969da);
4586
+ }
4587
+ .qt-metric-help {
4588
+ font-size: 11px;
4589
+ color: var(--qt-muted, #656d76);
4590
+ margin: 0;
4591
+ font-weight: 400;
4592
+ }
4593
+ .qt-metric-group-row {
4594
+ display: flex;
4595
+ align-items: center;
4596
+ gap: 6px;
4597
+ }
4598
+ .qt-metric-group-row select {
4599
+ min-width: 0;
4600
+ flex: 1;
4601
+ }
4602
+ .qt-metric-sort-row {
4603
+ display: grid;
4604
+ grid-template-columns: minmax(100px, 1fr) minmax(90px, 0.9fr) 26px;
4605
+ gap: 6px;
4606
+ }
4607
+ .qt-metric-sort-row select:nth-child(3) {
4608
+ grid-row: 2;
4609
+ grid-column: 1 / 3;
4610
+ }
4611
+ .qt-metric-sort-row button {
4612
+ grid-row: 1;
4613
+ grid-column: 3;
4614
+ }
4615
+ .qt-metric-group-row button,
4616
+ .qt-metric-sort-row button {
4617
+ border: 0;
4618
+ border-radius: 4px;
4619
+ background: transparent;
4620
+ color: var(--qt-muted, #656d76);
4621
+ cursor: pointer;
4622
+ padding: 4px;
4623
+ min-height: 28px;
4624
+ }
4625
+ .qt-metric-group-row button:hover,
4626
+ .qt-metric-sort-row button:hover {
4627
+ background: var(--qt-header-bg, #f6f8fa);
4628
+ }
4629
+ .qt-metric-size-controls {
4630
+ display: grid;
4631
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4632
+ gap: 8px;
4633
+ }
4634
+ .qt-metric-size-controls label {
4635
+ font-size: 11px;
4636
+ color: var(--qt-muted, #656d76);
4637
+ font-weight: 400;
4638
+ white-space: nowrap;
4639
+ }
4640
+ .qt-metric-format-controls {
4641
+ display: grid;
4642
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px;
4643
+ align-items: start;
4644
+ gap: 8px;
4645
+ }
4646
+ .qt-metric-format-controls--temporal {
4647
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4648
+ }
4649
+ .qt-metric-format-controls label {
4650
+ font-size: 11px;
4651
+ font-weight: 400;
4652
+ color: var(--qt-muted, #656d76);
4653
+ }
4654
+ .qt-metric-format-controls select {
4655
+ padding-inline: 6px;
4656
+ }
4657
+ .qt-metric-temporal-controls {
4658
+ grid-column: 1 / -1;
4659
+ display: grid;
4660
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4661
+ gap: 8px;
4662
+ }
4663
+ .qt-metric-temporal-controls label:has(input) {
4664
+ grid-column: 1 / -1;
4665
+ }
4666
+ .qt-metric-format-example {
4667
+ grid-column: 1 / -1;
4668
+ background: var(--qt-header-bg, #f6f8fa);
4669
+ border: 1px solid var(--qt-border-subtle, #eaeef2);
4670
+ border-radius: 6px;
4671
+ padding: 8px 10px;
4672
+ font-size: 11px;
4673
+ color: var(--qt-muted, #656d76);
4674
+ overflow-wrap: anywhere;
4675
+ }
4676
+ .qt-metric-format-example strong {
4677
+ display: block;
4678
+ margin-top: 2px;
4679
+ color: var(--qt-text, #1f2328);
4680
+ font-size: 15px;
4681
+ font-weight: 600;
4682
+ font-variant-numeric: tabular-nums;
4683
+ }
4684
+ .qt-metric-list-controls {
4685
+ display: grid;
4686
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4687
+ gap: 8px;
4688
+ }
4689
+ .qt-metric-reference {
4690
+ display: flex;
4691
+ flex-direction: column;
4692
+ gap: 16px;
4693
+ }
4694
+ .qt-metric-reference > * {
4695
+ flex-shrink: 0;
4696
+ }
4697
+ .qt-metric-reference h3 {
4698
+ margin-bottom: 0;
4699
+ }
4700
+ .qt-metric-reference > select {
4701
+ background: var(--qt-header-bg, #f6f8fa);
4702
+ }
4703
+ .qt-metric-reference-list {
4704
+ display: grid;
4705
+ gap: 0;
4706
+ }
4707
+ .qt-metric-reference-columns,
4708
+ .qt-metric-reference-item {
4709
+ display: grid;
4710
+ grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.2fr);
4711
+ gap: 0.5rem;
4712
+ align-items: center;
4713
+ padding: 0.375rem 0.25rem;
4714
+ min-width: 0;
4715
+ }
4716
+ .qt-metric-reference-columns {
4717
+ color: var(--qt-muted, #656d76);
4718
+ font-size: 10px;
4719
+ border-bottom: 1px solid var(--qt-border, #d0d7de);
4720
+ }
4721
+ .qt-metric-reference-item {
4722
+ text-align: start;
4723
+ border: 0;
4724
+ border-bottom: 1px solid var(--qt-border-subtle, #eaeef2);
4725
+ border-radius: 0;
4726
+ background: transparent;
4727
+ color: inherit;
4728
+ cursor: pointer;
4729
+ }
4730
+ .qt-metric-reference-item:hover {
4731
+ background: var(--qt-cell-hover, #f0f7ff);
4732
+ }
4733
+ .qt-metric-reference-item > * {
4734
+ min-width: 0;
4735
+ overflow: hidden;
4736
+ text-overflow: ellipsis;
4737
+ white-space: nowrap;
4738
+ }
4739
+ .qt-metric-reference-item strong {
4740
+ font-size: 11px;
4741
+ font-weight: 500;
4742
+ }
4743
+ .qt-metric-reference-item code,
4744
+ .qt-metric-reference-item span {
4745
+ font-size: 10px;
4746
+ color: var(--qt-muted, #656d76);
4747
+ }
4748
+ .qt-metric-reset-layout {
4749
+ margin-inline-start: auto;
4750
+ }
4751
+ .qt-metric-discard-actions {
4752
+ display: flex;
4753
+ flex-wrap: wrap;
4754
+ justify-content: flex-end;
4755
+ gap: 0.5rem;
4756
+ margin-top: 1rem;
4757
+ }
4758
+ .qt-metric-discard-actions > button {
4759
+ flex: 0 0 auto;
4760
+ }
4761
+ .qt-metric-workspace > .qt-metric-live-preview {
4762
+ background: var(--qt-bg, #fff);
4763
+ }
4764
+ .qt-metric-preview-heading {
4765
+ display: flex;
4766
+ align-items: center;
4767
+ justify-content: space-between;
4768
+ gap: 8px;
4769
+ margin-bottom: 6px;
4770
+ }
4771
+ .qt-metric-preview-heading h3 {
4772
+ margin: 0;
4773
+ }
4774
+ .qt-metric-preview-status {
4775
+ border: 1px solid var(--qt-border-subtle, #eaeef2);
4776
+ border-radius: 4px;
4777
+ padding: 2px 6px;
4778
+ font-size: 10px;
4779
+ color: var(--qt-muted, #656d76);
4780
+ background: var(--qt-header-bg, #f6f8fa);
4781
+ white-space: nowrap;
4782
+ }
4783
+ .qt-metric-preview-scope {
4784
+ font-size: 12px;
4785
+ margin: 0 0 4px;
4786
+ }
4787
+ .qt-metric-preview-controls {
4788
+ display: flex;
4789
+ flex-wrap: wrap;
4790
+ gap: 8px;
4791
+ align-items: center;
4792
+ margin: 12px 0 10px;
4793
+ }
4794
+ .qt-metric-preview-controls label {
4795
+ flex-direction: row;
4796
+ align-items: center;
4797
+ gap: 4px;
4798
+ font-size: 10px;
4799
+ font-weight: 400;
4800
+ }
4801
+ .qt-metric-preview-controls input {
4802
+ width: 64px;
4803
+ min-height: 28px;
4804
+ padding: 4px 6px;
4805
+ }
4806
+ .qt-metric-preview-controls .qt-btn {
4807
+ font-size: 11px;
4808
+ min-height: 28px;
4809
+ padding: 4px 7px;
4810
+ }
4811
+ .qt-metric-preview-controls .qt-metric-refresh {
4812
+ font-size: 16px;
4813
+ width: 28px;
4814
+ padding: 0;
4815
+ }
4816
+ .qt-metric-preview-card {
4817
+ resize: both;
4818
+ overflow: auto;
4819
+ min-width: 100px;
4820
+ min-height: 60px;
4821
+ max-width: 1800px;
4822
+ max-height: 1000px;
4823
+ padding: 0;
4824
+ box-sizing: border-box;
4825
+ }
4826
+ .qt-metric-preview-card > .qt-metric {
4827
+ width: 100% !important;
4828
+ height: 100% !important;
4829
+ min-width: 0 !important;
4830
+ min-height: 0 !important;
4831
+ margin: 0;
4832
+ }
4833
+ .qt-metric-preview-card + .qt-metric-help {
4834
+ margin-top: 12px;
4835
+ }
4836
+ .qt-metric-live-preview > .qt-muted {
4837
+ font-size: 11px;
4838
+ margin: 10px 0 16px;
4839
+ }
4840
+ .qt-metric-inspection-expression {
4841
+ background: var(--qt-header-bg, #f6f8fa);
4842
+ border: 1px solid var(--qt-border-subtle, #eaeef2);
4843
+ border-radius: 6px;
4844
+ padding: 10px;
4845
+ font-size: 11px;
4846
+ overflow-wrap: anywhere;
4847
+ white-space: pre-wrap;
4848
+ }
4849
+ .qt-metric-inspection-values {
4850
+ background: var(--qt-header-bg, #f6f8fa);
4851
+ border: 1px solid var(--qt-border-subtle, #eaeef2);
4852
+ border-radius: 6px;
4853
+ padding: 8px 12px;
4854
+ margin: 0;
4855
+ font-size: 11px;
4856
+ }
4857
+ .qt-metric-inspection-values > div {
4858
+ display: flex;
4859
+ justify-content: space-between;
4860
+ gap: 12px;
4861
+ margin: 4px 0;
4862
+ }
4863
+ .qt-metric-inspection-values dd {
4864
+ margin: 0;
4865
+ font-variant-numeric: tabular-nums;
4866
+ text-align: end;
4867
+ overflow-wrap: anywhere;
4868
+ }
4869
+ .qt-metrics-editor-footer {
4870
+ padding: 14px 22px;
4871
+ border-top: 1px solid var(--qt-border, #d0d7de);
4872
+ background: var(--qt-header-bg, #f6f8fa);
4873
+ display: flex;
4874
+ align-items: center;
4875
+ flex-shrink: 0;
4876
+ gap: 8px;
4877
+ }
4878
+ .qt-metrics-editor-footer > span {
4879
+ flex: 1;
4880
+ font-size: 12px;
4881
+ }
4882
+ .qt-metrics-editor-footer .qt-btn {
4883
+ font-size: 14px;
4884
+ min-height: 36px;
4885
+ }
4886
+ .qt-metric-editor-error {
4887
+ background: var(--qt-fail-bg, #ffebe9);
4888
+ color: var(--qt-fail-fg, #cf222e);
4889
+ border: 1px solid color-mix(in srgb, var(--qt-fail-fg, #cf222e) 25%, var(--qt-bg, #fff));
4890
+ padding: 8px 10px;
4891
+ border-radius: 6px;
4892
+ font-size: 12px;
4893
+ margin: 0 0 12px;
4894
+ overflow-wrap: anywhere;
4895
+ }
4896
+ .qt-metrics-editor > .qt-metric-editor-error {
4897
+ margin: 8px 18px;
4898
+ flex-shrink: 0;
4899
+ }
4900
+ .qt-metric-layout-editor {
4901
+ flex: 1;
4902
+ min-height: 0;
4903
+ display: flex;
4904
+ flex-direction: column;
4905
+ background: var(--qt-header-bg, #f6f8fa);
4906
+ }
4907
+ .qt-metric-canvas-controls {
4908
+ display: flex;
4909
+ align-items: center;
4910
+ gap: 16px;
4911
+ flex-wrap: wrap;
4912
+ padding: 18px 20px 12px;
4913
+ flex-shrink: 0;
4914
+ }
4915
+ .qt-metric-canvas-heading {
4916
+ margin-inline-end: auto;
4917
+ }
4918
+ .qt-metric-canvas-heading strong {
4919
+ display: block;
4920
+ font-size: 13px;
4921
+ font-weight: 600;
4922
+ margin-bottom: 4px;
4923
+ }
4924
+ .qt-metric-canvas-presets {
4925
+ display: flex;
4926
+ align-items: center;
4927
+ gap: 8px;
4928
+ flex-wrap: wrap;
4929
+ padding: 6px 8px;
4930
+ border: 1px solid var(--qt-border, #d0d7de);
4931
+ border-radius: 8px;
4932
+ background: var(--qt-bg, #fff);
4933
+ }
4934
+ .qt-metric-canvas-presets label {
4935
+ flex-direction: row;
4936
+ align-items: center;
4937
+ font-weight: 400;
4938
+ }
4939
+ .qt-metric-canvas-presets input {
4940
+ width: 84px;
4941
+ }
4942
+ .qt-metric-canvas-presets span {
4943
+ font-size: 11px;
4944
+ color: var(--qt-muted, #656d76);
4945
+ }
4946
+ .qt-metric-canvas-presets .qt-btn {
4947
+ min-height: 34px;
4948
+ font-size: 11px;
4949
+ }
4950
+ .qt-metric-canvas-presets button[aria-pressed=true] {
4951
+ background: var(--qt-accent-bg, #ddf4ff);
4952
+ border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
4953
+ color: var(--qt-accent, #0969da);
4954
+ }
4955
+ .qt-metric-layout-controls {
4956
+ display: flex;
4957
+ align-items: end;
4958
+ flex-wrap: wrap;
4959
+ gap: 12px;
4960
+ padding: 12px;
4961
+ margin: 0 20px 14px;
4962
+ border: 1px solid var(--qt-border, #d0d7de);
4963
+ border-radius: 8px;
4964
+ background: var(--qt-bg, #fff);
4965
+ flex-shrink: 0;
4966
+ }
4967
+ .qt-metric-layout-controls label {
4968
+ font-size: 11px;
4969
+ color: var(--qt-muted, #656d76);
4970
+ font-weight: 400;
4971
+ gap: 4px;
4972
+ }
4973
+ .qt-metric-layout-controls :is(.qt-metric-layout-picker, .qt-metric-layout-name) {
4974
+ flex: 1;
4975
+ min-width: 160px;
4976
+ }
4977
+ .qt-metric-layout-controls .qt-metric-size-controls {
4978
+ display: flex;
4979
+ flex-wrap: wrap;
4980
+ gap: 12px;
4981
+ }
4982
+ .qt-metric-layout-controls .qt-metric-size-controls label {
4983
+ width: 86px;
4984
+ }
4985
+ .qt-metric-layout-controls > .qt-btn {
4986
+ min-height: 34px;
4987
+ }
4988
+ .qt-metric-canvas-scroll {
4989
+ flex: 1;
4990
+ min-height: 0;
4991
+ overflow: auto;
4992
+ overscroll-behavior: contain;
4993
+ padding: 12px;
4994
+ margin: 0 20px;
4995
+ border: 1px solid var(--qt-border, #d0d7de);
4996
+ border-bottom: 0;
4997
+ border-radius: 8px 8px 0 0;
4998
+ background: var(--qt-border-subtle, #eaeef2);
4999
+ }
5000
+ .qt-metric-layout-canvas {
5001
+ min-height: 100%;
5002
+ max-width: none;
5003
+ background: var(--qt-header-bg, #f6f8fa);
5004
+ }
5005
+ .qt-metric-layout-items {
5006
+ display: flex;
5007
+ align-items: flex-start;
5008
+ flex-wrap: wrap;
5009
+ gap: 12px;
5010
+ margin: 0;
5011
+ padding: 0;
5012
+ overflow: visible;
5013
+ }
5014
+ .qt-metric-layout-items > .qt-reorder-item {
5015
+ position: relative;
5016
+ padding: 0;
5017
+ display: block;
5018
+ border: 0;
5019
+ background: transparent;
5020
+ max-width: 100%;
5021
+ outline: 1px solid transparent;
5022
+ border-radius: 8px;
5023
+ transition: outline-color 0.12s;
5024
+ }
5025
+ .qt-metric-layout-items > .qt-reorder-item.qt-metric-layout-selected {
5026
+ outline-color: var(--qt-accent, #0969da);
5027
+ }
5028
+ .qt-metric-layout-items > .qt-reorder-item > .qt-reorder-handle {
5029
+ position: absolute;
5030
+ z-index: 5;
5031
+ top: 8px;
5032
+ inset-inline-start: 4px;
5033
+ opacity: 0;
5034
+ }
5035
+ .qt-metric-layout-items > .qt-reorder-item:is(:hover, :focus-within) > .qt-reorder-handle {
5036
+ opacity: 1;
5037
+ }
5038
+ .qt-metric-layout-card {
5039
+ height: 100%;
5040
+ width: 100%;
5041
+ }
5042
+ .qt-metric-layout-card > .qt-metric {
5043
+ width: 100% !important;
5044
+ height: 100% !important;
5045
+ min-width: 0 !important;
5046
+ min-height: 0 !important;
5047
+ }
5048
+ .qt-metric-layout-card .qt-metric-head {
5049
+ padding-inline-end: 22px;
5050
+ }
5051
+ .qt-metric-layout-card .qt-metric-title {
5052
+ padding-inline-start: 0;
5053
+ transition: padding 0.12s;
5054
+ }
5055
+ .qt-reorder-item:is(:hover, :focus-within) .qt-metric-layout-card .qt-metric-title {
5056
+ padding-inline-start: 14px;
5057
+ }
5058
+ .qt-metrics-editor .qt-metric--chart {
5059
+ min-height: 0;
5060
+ }
5061
+ .qt-metrics-editor .qt-metric-chart-layout {
5062
+ min-height: 80px;
5063
+ flex: 1 0 80px;
5064
+ }
5065
+ .qt-metrics-editor .qt-metric-plot {
5066
+ min-height: 80px;
5067
+ }
5068
+ @media (max-width: 1000px) {
5069
+ .qt-metric-canvas-controls {
5070
+ align-items: flex-start;
5071
+ gap: 10px;
5072
+ padding: 12px;
5073
+ }
5074
+ .qt-metric-layout-controls {
5075
+ margin-inline: 12px;
5076
+ }
5077
+ .qt-metric-canvas-scroll {
5078
+ margin-inline: 12px;
5079
+ }
5080
+ }
5081
+ @media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
5082
+ .qt-metrics-editor.qt-modal.qt-sheet {
5083
+ width: 100%;
5084
+ max-width: 100%;
5085
+ min-width: 0;
5086
+ height: 100%;
5087
+ max-height: 100%;
5088
+ min-height: 0;
5089
+ border-radius: 12px 12px 0 0;
5090
+ resize: none;
5091
+ }
5092
+ .qt-metrics-editor-header {
5093
+ flex-wrap: wrap;
5094
+ gap: 8px;
5095
+ padding: 10px 12px;
5096
+ }
5097
+ .qt-metrics-editor-header h2 {
5098
+ font-size: 16px;
5099
+ }
5100
+ .qt-metrics-editor-header > label {
5101
+ flex: 1;
5102
+ width: auto;
5103
+ }
5104
+ .qt-metrics-editor-header > .qt-btn:not(.qt-metric-close) {
5105
+ display: none;
5106
+ }
5107
+ .qt-metrics-editor-header .qt-metric-close {
5108
+ min-height: 34px;
5109
+ }
5110
+ .qt-metrics-editor-context {
5111
+ gap: 12px;
5112
+ padding: 8px 12px;
5113
+ font-size: 11px;
5114
+ }
5115
+ .qt-metrics-editor-footer {
5116
+ gap: 8px;
5117
+ padding: 10px 12px max(10px, env(safe-area-inset-bottom));
5118
+ }
5119
+ .qt-metrics-editor-footer > span {
5120
+ font-size: 10px;
5121
+ }
5122
+ .qt-metrics-editor-footer .qt-btn {
5123
+ font-size: 12px;
5124
+ min-height: 38px;
5125
+ }
5126
+ .qt-metric-workspace > :is(aside, section) {
5127
+ padding: 12px;
5128
+ }
5129
+ .qt-metric-layout-controls {
5130
+ max-height: 35dvh;
5131
+ overflow: auto;
5132
+ }
5133
+ }
5134
+ @media (prefers-reduced-motion: reduce) {
5135
+ .qt-metrics-editor * {
5136
+ scroll-behavior: auto;
5137
+ transition: none;
5138
+ }
5139
+ }
5140
+ .qt-metrics-editor [hidden] {
5141
+ display: none !important;
5142
+ }
5143
+ .qt-metric-workbench-tools {
5144
+ display: flex;
5145
+ align-items: center;
5146
+ gap: 12px;
5147
+ flex-wrap: wrap;
5148
+ padding: 8px 18px;
5149
+ border-bottom: 1px solid var(--qt-border, #d0d7de);
5150
+ flex-shrink: 0;
5151
+ background: var(--qt-bg, #fff);
5152
+ }
5153
+ .qt-metric-selection-tools {
5154
+ display: flex;
5155
+ align-items: center;
5156
+ gap: 4px;
5157
+ min-width: 0;
5158
+ }
5159
+ .qt-metric-selection-tools select {
5160
+ width: 230px;
5161
+ min-height: 30px;
5162
+ padding-block: 4px;
5163
+ font-weight: 500;
5164
+ }
5165
+ .qt-metric-panel-tools {
5166
+ display: flex;
5167
+ align-items: center;
5168
+ gap: 4px;
5169
+ margin-inline-start: auto;
5170
+ }
5171
+ .qt-metric-panel-tools > span:first-child {
5172
+ margin-inline-end: 4px;
5173
+ font-size: 11px;
5174
+ color: var(--qt-muted, #656d76);
5175
+ }
5176
+ .qt-metrics-editor .qt-metric-icon-button {
5177
+ display: inline-flex;
5178
+ align-items: center;
5179
+ width: 30px;
5180
+ min-height: 30px;
5181
+ padding: 0;
5182
+ flex-shrink: 0;
5183
+ }
5184
+ .qt-metric-panel-tools .qt-btn[aria-pressed=true] {
5185
+ color: var(--qt-accent, #0969da);
5186
+ border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
5187
+ background: var(--qt-accent-bg, #ddf4ff);
5188
+ }
5189
+ .qt-metric-panel-tools .qt-btn[aria-pressed=false] {
5190
+ color: var(--qt-muted, #656d76);
5191
+ background: var(--qt-header-bg, #f6f8fa);
5192
+ }
5193
+ .qt-metric-pane-heading {
5194
+ display: flex;
5195
+ align-items: center;
5196
+ gap: 6px;
5197
+ justify-content: space-between;
5198
+ margin-bottom: 16px;
5199
+ }
5200
+ .qt-metric-workspace .qt-metric-pane-heading h3 {
5201
+ margin: 0;
5202
+ }
5203
+ .qt-metric-reference .qt-metric-pane-heading {
5204
+ margin-bottom: 0;
5205
+ }
5206
+ .qt-metrics-editor .qt-metric-pane-collapse {
5207
+ border: 0;
5208
+ background: transparent;
5209
+ color: var(--qt-muted, #656d76);
5210
+ width: 24px;
5211
+ min-height: 24px;
5212
+ opacity: 0.5;
5213
+ }
5214
+ .qt-metric-pane-collapse:is(:hover, :focus-visible) {
5215
+ opacity: 1;
5216
+ }
5217
+ .qt-metric-preview-heading .qt-metric-preview-status {
5218
+ margin-inline-start: auto;
5219
+ }
5220
+ .qt-metric-needs-attention {
5221
+ display: inline-flex;
5222
+ vertical-align: middle;
5223
+ margin-inline-start: 5px;
5224
+ color: var(--qt-fail-fg, #cf222e);
5225
+ }
5226
+ .qt-metric-review-issues {
5227
+ color: var(--qt-fail-fg, #cf222e);
5228
+ }
5229
+ .qt-metric-authoring-empty {
5230
+ display: flex;
5231
+ flex-direction: column;
5232
+ align-items: center;
5233
+ text-align: center;
5234
+ gap: 12px;
5235
+ padding: 32px 16px;
5236
+ color: var(--qt-muted, #656d76);
5237
+ }
5238
+ .qt-metric-authoring-empty p {
5239
+ margin: 0;
5240
+ }
5241
+ .qt-metric-authoring-empty strong {
5242
+ color: var(--qt-text, #1f2328);
5243
+ }
5244
+ .qt-metric-canvas-frame {
5245
+ position: relative;
5246
+ min-height: 100%;
5247
+ padding-inline-end: 18px;
5248
+ }
5249
+ .qt-metric-canvas-resize {
5250
+ position: absolute;
5251
+ inset-inline-end: 0;
5252
+ top: 0;
5253
+ bottom: 0;
5254
+ width: 18px;
5255
+ cursor: col-resize;
5256
+ touch-action: none;
5257
+ background: var(--qt-header-bg, #f6f8fa);
5258
+ border-inline-start: 1px solid var(--qt-border, #d0d7de);
5259
+ border-inline-end: 1px solid var(--qt-border, #d0d7de);
5260
+ border-radius: 0 5px 5px 0;
5261
+ color: var(--qt-muted, #656d76);
5262
+ }
5263
+ .qt-metric-canvas-resize > .qt-icon {
5264
+ position: sticky;
5265
+ top: 120px;
5266
+ margin-top: 110px;
5267
+ margin-inline-start: 1px;
5268
+ }
5269
+ .qt-metric-canvas-resize:is(:hover, :focus-visible) {
5270
+ background: var(--qt-accent-bg, #ddf4ff);
5271
+ color: var(--qt-accent, #0969da);
5272
+ }
5273
+ .qt-metric-canvas-note {
5274
+ flex-shrink: 0;
5275
+ padding: 8px 20px;
5276
+ border-top: 1px solid var(--qt-border, #d0d7de);
5277
+ }
5278
+ .qt-metric-layout-card .qt-metric-head {
5279
+ padding-inline-end: 56px;
5280
+ }
5281
+ .qt-metrics-editor .qt-metric-card-edit {
5282
+ position: absolute;
5283
+ top: 10px;
5284
+ inset-inline-end: 28px;
5285
+ z-index: 4;
5286
+ min-height: 28px;
5287
+ width: 28px;
5288
+ background: var(--qt-bg, #fff);
5289
+ border: 0;
5290
+ opacity: 0;
5291
+ }
5292
+ .qt-metric-card-resize {
5293
+ position: absolute;
5294
+ inset-inline-end: 0;
5295
+ bottom: 0;
5296
+ display: flex;
5297
+ justify-content: center;
5298
+ align-items: center;
5299
+ width: 22px;
5300
+ height: 22px;
5301
+ padding: 0;
5302
+ background: var(--qt-bg, #fff);
5303
+ border: 0;
5304
+ border-radius: 4px 0 8px 0;
5305
+ color: var(--qt-muted, #656d76);
5306
+ cursor: nwse-resize;
5307
+ touch-action: none;
5308
+ z-index: 4;
5309
+ opacity: 0;
5310
+ }
5311
+ .qt-metric-layout-selected .qt-metric-card-resize,
5312
+ .qt-reorder-item:is(:hover, :focus-within) :is(.qt-metric-card-edit, .qt-metric-card-resize) {
5313
+ opacity: 1;
5314
+ }
5315
+ .qt-metric-card-resize:is(:hover, :focus-visible) {
5316
+ color: var(--qt-accent, #0969da);
5317
+ background: var(--qt-accent-bg, #ddf4ff);
5318
+ }
5319
+ @media (pointer: coarse) {
5320
+ .qt-metric-card-resize {
5321
+ width: 30px;
5322
+ height: 30px;
5323
+ }
5324
+ .qt-metric-card-edit,
5325
+ .qt-metric-card-resize {
5326
+ opacity: 1 !important;
5327
+ }
5328
+ }
5329
+ @media (max-width: 760px) {
5330
+ .qt-metric-workbench-tools {
5331
+ padding: 8px 12px;
5332
+ gap: 8px;
5333
+ }
5334
+ .qt-metric-selection-tools {
5335
+ flex: 1;
5336
+ }
5337
+ .qt-metric-selection-tools select {
5338
+ width: auto;
5339
+ flex: 1;
5340
+ }
5341
+ .qt-metric-panel-tools {
5342
+ margin-inline-start: 0;
5343
+ }
5344
+ .qt-metric-context-link {
5345
+ margin-inline-start: auto;
5346
+ }
5347
+ .qt-metrics-editor-footer {
5348
+ flex-wrap: wrap;
5349
+ }
5350
+ .qt-metrics-editor-footer > span {
5351
+ min-width: 100%;
5352
+ }
5353
+ .qt-metric-canvas-note {
5354
+ padding-inline: 12px;
5355
+ }
5356
+ }
5357
+ @keyframes qt-metric-view-enter {
5358
+ from {
5359
+ opacity: 0.65;
5360
+ }
5361
+ to {
5362
+ opacity: 1;
5363
+ }
5364
+ }
5365
+ .qt-metric-workspace,
5366
+ .qt-metric-layout-editor {
5367
+ animation: qt-metric-view-enter 140ms ease-out;
5368
+ }
5369
+ @media (prefers-reduced-motion: reduce) {
5370
+ .qt-metric-workspace,
5371
+ .qt-metric-layout-editor {
5372
+ animation: none;
5373
+ }
5374
+ }
5375
+ .qt-metric-axis-settings {
5376
+ border: 1px solid var(--qt-border-subtle, #eaeef2);
5377
+ border-radius: 0.375rem;
5378
+ margin: 0 0 0.75rem;
5379
+ padding: 0.5rem;
5380
+ display: grid;
5381
+ grid-template-columns: 1.2fr 1fr 1fr;
5382
+ gap: 0.5rem;
5383
+ min-width: 0;
5384
+ }
5385
+ .qt-metric-axis-settings legend {
5386
+ font-size: 0.75rem;
5387
+ color: var(--qt-muted, #656d76);
5388
+ }
5389
+ .qt-metric-axis-settings label {
5390
+ min-width: 0;
5391
+ display: flex;
5392
+ flex-direction: column;
5393
+ gap: 0.25rem;
5394
+ }
5395
+ .qt-metric-axis-settings input,
5396
+ .qt-metric-axis-settings select {
5397
+ width: 100%;
5398
+ box-sizing: border-box;
5399
+ min-width: 0;
5400
+ }
5401
+
5402
+ /* src/theme.css */
2255
5403
  /*# sourceMappingURL=theme.css.map */