@pythia-software/query-table-ui 0.4.1 → 0.5.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
@@ -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 {
@@ -1143,15 +1359,13 @@
1143
1359
  background: var(--qt-warn-bg);
1144
1360
  }
1145
1361
  .qt-qb-row--metrics {
1146
- border-top: 1px dotted var(--qt-border);
1147
- padding-top: 9px;
1148
- margin-top: 3px;
1362
+ margin: 0;
1149
1363
  }
1150
1364
  .qt-chip--agg {
1151
1365
  gap: 4px;
1152
1366
  height: auto;
1153
1367
  min-height: 24px;
1154
- padding: 1px 6px;
1368
+ padding: 0 6px;
1155
1369
  flex-wrap: wrap;
1156
1370
  }
1157
1371
  .qt-chip-agg-by {
@@ -1169,6 +1383,7 @@
1169
1383
  border-radius: 4px;
1170
1384
  padding: 0 2px 0 6px;
1171
1385
  height: 20px;
1386
+ box-sizing: border-box;
1172
1387
  font-size: 11px;
1173
1388
  }
1174
1389
  .qt-chip-agg-group-label {
@@ -1178,8 +1393,11 @@
1178
1393
  font-size: 9px;
1179
1394
  padding: 0 1px;
1180
1395
  }
1181
- .qt-chip-agg-add {
1182
- padding: 0 7px;
1396
+ .qt-chip--agg .qt-chip-agg-add {
1397
+ height: 20px;
1398
+ border-radius: 4px;
1399
+ padding: 0 5px;
1400
+ font-size: 11px;
1183
1401
  }
1184
1402
  .qt-metrics {
1185
1403
  display: flex;
@@ -1362,11 +1580,11 @@
1362
1580
  }
1363
1581
  .qt-qt-section-toggle {
1364
1582
  position: absolute;
1365
- left: -20px;
1583
+ left: -28px;
1366
1584
  top: 0;
1367
- width: 20px;
1368
- height: 26px;
1369
- min-width: 20px;
1585
+ width: 28px;
1586
+ height: 32px;
1587
+ min-width: 28px;
1370
1588
  padding: 0;
1371
1589
  border-right: 0;
1372
1590
  border-radius: var(--qt-radius) 0 0 var(--qt-radius);
@@ -1380,7 +1598,9 @@
1380
1598
  line-height: 1;
1381
1599
  transition: transform 0.12s ease;
1382
1600
  transform: rotate(0deg);
1383
- font-size: 13px;
1601
+ width: 18px;
1602
+ height: 18px;
1603
+ flex-shrink: 0;
1384
1604
  }
1385
1605
  .qt-qt-section-toggle-caret--collapsed {
1386
1606
  transform: rotate(-90deg);
@@ -1414,7 +1634,7 @@
1414
1634
  display: none;
1415
1635
  }
1416
1636
  }
1417
- @media (max-width: 640px) {
1637
+ @media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
1418
1638
  .qt-qb {
1419
1639
  font-size: 14px;
1420
1640
  }
@@ -1497,7 +1717,7 @@
1497
1717
  .qt-chip {
1498
1718
  height: auto;
1499
1719
  min-height: 40px;
1500
- padding: 4px 8px;
1720
+ padding: 0 8px;
1501
1721
  gap: 5px;
1502
1722
  flex-wrap: wrap;
1503
1723
  font-size: 13px;
@@ -1508,60 +1728,24 @@
1508
1728
  .qt-chip-x {
1509
1729
  min-width: 30px;
1510
1730
  min-height: 30px;
1511
- padding: 4px 7px;
1731
+ padding: 0 7px;
1512
1732
  justify-content: center;
1513
1733
  font-size: 13px;
1514
1734
  }
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
1735
  .qt-chip-op,
1551
1736
  .qt-chip-val {
1552
1737
  height: 32px;
1553
1738
  min-height: 32px;
1554
- padding: 4px 6px;
1739
+ padding: 0 6px;
1555
1740
  font-size: 16px;
1556
1741
  }
1557
1742
  .qt-chip-op-btn {
1558
1743
  height: 32px;
1559
- padding: 4px 8px;
1744
+ padding: 0 8px;
1560
1745
  font-size: 13px;
1561
1746
  }
1562
1747
  .qt-chip-where-list,
1563
- .qt-chip-where-clause,
1564
- .qt-sort-extract {
1748
+ .qt-chip-where-clause {
1565
1749
  max-width: 100%;
1566
1750
  }
1567
1751
  .qt-chip--where {
@@ -1586,6 +1770,7 @@
1586
1770
  }
1587
1771
  .qt-qb-window-field {
1588
1772
  display: flex;
1773
+ align-items: stretch;
1589
1774
  flex: 1 1 0;
1590
1775
  flex-direction: column;
1591
1776
  gap: 5px;
@@ -1605,10 +1790,6 @@
1605
1790
  padding: 6px 8px;
1606
1791
  font-size: 16px;
1607
1792
  }
1608
- .qt-qb-row--metrics {
1609
- padding-top: 14px;
1610
- margin-top: 0;
1611
- }
1612
1793
  .qt-qb-run-bar {
1613
1794
  align-items: center;
1614
1795
  row-gap: 6px;
@@ -1750,8 +1931,9 @@
1750
1931
  font-weight: 700;
1751
1932
  letter-spacing: 0.02em;
1752
1933
  }
1753
- .qt-table-scroll-cue span {
1754
- font-size: 15px;
1934
+ .qt-table-scroll-cue .qt-icon {
1935
+ width: 16px;
1936
+ height: 16px;
1755
1937
  }
1756
1938
  .qt-table-wrap {
1757
1939
  container-type: inline-size;
@@ -1941,6 +2123,9 @@
1941
2123
  padding: 7px 5px;
1942
2124
  }
1943
2125
  .qt-column-name {
2126
+ display: flex;
2127
+ align-items: center;
2128
+ gap: 4px;
1944
2129
  border: 0;
1945
2130
  background: transparent;
1946
2131
  text-align: left;
@@ -1952,6 +2137,9 @@
1952
2137
  color: inherit;
1953
2138
  }
1954
2139
  .qt-icon-btn {
2140
+ display: inline-flex;
2141
+ align-items: center;
2142
+ justify-content: center;
1955
2143
  border: 0;
1956
2144
  background: transparent;
1957
2145
  color: inherit;
@@ -2252,4 +2440,1143 @@
2252
2440
  color: #3fb950;
2253
2441
  }
2254
2442
  }
2443
+ .qt-overlay-backdrop {
2444
+ z-index: 1000;
2445
+ }
2446
+ .qt-modal-surface {
2447
+ display: flex;
2448
+ flex-direction: column;
2449
+ overflow: hidden;
2450
+ padding: 0;
2451
+ color: var(--qt-text);
2452
+ background: var(--qt-bg, #fff);
2453
+ }
2454
+ .qt-modal-surface:focus {
2455
+ outline: none;
2456
+ }
2457
+ .qt-overlay-header {
2458
+ display: flex;
2459
+ align-items: center;
2460
+ justify-content: space-between;
2461
+ gap: 16px;
2462
+ flex-shrink: 0;
2463
+ padding: 12px 16px;
2464
+ border-bottom: 1px solid var(--qt-border-subtle);
2465
+ }
2466
+ .qt-overlay-header h2 {
2467
+ margin: 0;
2468
+ font-size: 17px;
2469
+ line-height: 1.3;
2470
+ overflow-wrap: anywhere;
2471
+ }
2472
+ .qt-overlay-header .qt-btn {
2473
+ flex-shrink: 0;
2474
+ color: var(--qt-accent);
2475
+ }
2476
+ .qt-overlay-body {
2477
+ padding: 16px;
2478
+ overflow-y: auto;
2479
+ overscroll-behavior: contain;
2480
+ min-height: 0;
2481
+ }
2482
+ .qt-editor-mobile-nav {
2483
+ display: none;
2484
+ }
2485
+ .qt-reorder-hint {
2486
+ margin: 0;
2487
+ padding: 16px;
2488
+ font-size: 14px;
2489
+ line-height: 1.5;
2490
+ }
2491
+ .qt-reorder-list {
2492
+ list-style: none;
2493
+ margin: 0;
2494
+ padding: 0 16px 16px;
2495
+ overflow-y: auto;
2496
+ overscroll-behavior: contain;
2497
+ min-height: 0;
2498
+ }
2499
+ .qt-reorder-item {
2500
+ display: flex;
2501
+ align-items: center;
2502
+ gap: 12px;
2503
+ min-height: 60px;
2504
+ padding: 4px 0 4px 12px;
2505
+ box-sizing: border-box;
2506
+ border-bottom: 1px solid var(--qt-border-subtle);
2507
+ background: var(--qt-bg, #fff);
2508
+ }
2509
+ .qt-reorder-item--dragging {
2510
+ background: var(--qt-accent-bg);
2511
+ border-radius: 8px;
2512
+ box-shadow: 0 0 0 2px var(--qt-accent);
2513
+ }
2514
+ .qt-reorder-label {
2515
+ flex: 1;
2516
+ min-width: 0;
2517
+ overflow-wrap: anywhere;
2518
+ font-size: 15px;
2519
+ }
2520
+ .qt-reorder-handle {
2521
+ display: flex;
2522
+ align-items: center;
2523
+ justify-content: center;
2524
+ min-width: 48px;
2525
+ min-height: 48px;
2526
+ border: 0;
2527
+ border-radius: 8px;
2528
+ background: transparent;
2529
+ color: var(--qt-muted);
2530
+ font-size: 26px;
2531
+ cursor: grab;
2532
+ touch-action: none;
2533
+ user-select: none;
2534
+ -webkit-user-select: none;
2535
+ }
2536
+ .qt-reorder-handle:active {
2537
+ cursor: grabbing;
2538
+ color: var(--qt-accent);
2539
+ }
2540
+ .qt-reorder-handle:disabled {
2541
+ opacity: 0.4;
2542
+ }
2543
+ .qt-value-picker {
2544
+ position: relative;
2545
+ }
2546
+ .qt-value-picker-pop {
2547
+ display: flex;
2548
+ flex-direction: column;
2549
+ gap: 8px;
2550
+ position: absolute;
2551
+ top: 100%;
2552
+ left: 0;
2553
+ z-index: 30;
2554
+ background: var(--qt-bg, #fff);
2555
+ padding: 8px;
2556
+ min-width: 220px;
2557
+ max-height: 300px;
2558
+ border: 1px solid var(--qt-border);
2559
+ border-radius: var(--qt-radius);
2560
+ box-shadow: 0 4px 16px #0002;
2561
+ }
2562
+ .qt-value-picker-list {
2563
+ overflow-y: auto;
2564
+ min-height: 0;
2565
+ }
2566
+ .qt-value-picker-list button {
2567
+ display: block;
2568
+ width: 100%;
2569
+ padding: 8px;
2570
+ text-align: left;
2571
+ font: inherit;
2572
+ color: var(--qt-text);
2573
+ border: 0;
2574
+ border-radius: 6px;
2575
+ background: transparent;
2576
+ }
2577
+ .qt-value-picker-list button:hover,
2578
+ .qt-value-picker-list button[aria-pressed=true] {
2579
+ background: var(--qt-accent-bg);
2580
+ }
2581
+ @media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
2582
+ .qt-qb *,
2583
+ .qt-sheet * {
2584
+ box-sizing: border-box;
2585
+ }
2586
+ .qt-qb .qt-btn,
2587
+ .qt-qb .qt-add,
2588
+ .qt-qb .qt-link-btn,
2589
+ .qt-sheet button,
2590
+ .qt-sheet select,
2591
+ .qt-sheet input:not([type=checkbox]),
2592
+ .qt-selection-toolbar .qt-btn {
2593
+ min-height: 44px;
2594
+ touch-action: manipulation;
2595
+ }
2596
+ .qt-qb .qt-btn,
2597
+ .qt-qb .qt-add,
2598
+ .qt-qb .qt-link-btn {
2599
+ padding: 6px 10px;
2600
+ min-width: 44px;
2601
+ }
2602
+ .qt-qb-bar {
2603
+ padding: 4px 8px;
2604
+ }
2605
+ .qt-qb-state-bar {
2606
+ padding-left: 36px;
2607
+ min-height: 40px;
2608
+ gap: 6px;
2609
+ }
2610
+ .qt-qb-state-bar .qt-btn {
2611
+ min-height: 32px;
2612
+ min-width: 32px;
2613
+ padding: 0 6px;
2614
+ }
2615
+ .qt-qb-state-bar .qt-qb-collapse-btn {
2616
+ left: 6px;
2617
+ width: 24px;
2618
+ min-width: 24px;
2619
+ height: 24px;
2620
+ min-height: 24px;
2621
+ padding: 0;
2622
+ }
2623
+ .qt-qb-editor-bar {
2624
+ padding: 8px;
2625
+ gap: 8px;
2626
+ }
2627
+ .qt-qb-editor-bar .qt-qb-body {
2628
+ gap: 0;
2629
+ }
2630
+ .qt-qb-editor-bar .qt-qb-row {
2631
+ gap: 6px;
2632
+ }
2633
+ .qt-qb-editor-stack {
2634
+ gap: 6px;
2635
+ }
2636
+ .qt-qb .qt-chip {
2637
+ padding: 0 6px;
2638
+ gap: 4px;
2639
+ }
2640
+ .qt-qb-run-bar {
2641
+ padding: 10px 8px;
2642
+ }
2643
+ .qt-qb-run-actions {
2644
+ display: grid;
2645
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2646
+ gap: 6px;
2647
+ }
2648
+ .qt-qb-run-actions > .qt-qb-auto-status {
2649
+ grid-column: 1 / -1;
2650
+ }
2651
+ .qt-qb-run-actions > .qt-btn,
2652
+ .qt-auto-refresh > .qt-btn {
2653
+ justify-content: center;
2654
+ padding-left: 8px;
2655
+ padding-right: 8px;
2656
+ }
2657
+ .qt-qb-pagination {
2658
+ gap: 8px;
2659
+ }
2660
+ .qt-qb-window-field {
2661
+ gap: 6px;
2662
+ }
2663
+ .qt-qb-window-field > .qt-qb-kw[data-mobile-label] {
2664
+ min-height: 32px;
2665
+ align-items: center;
2666
+ font-size: 0;
2667
+ }
2668
+ .qt-qb-window-field + .qt-qb-window-field {
2669
+ margin-left: 6px;
2670
+ padding-left: 12px;
2671
+ }
2672
+ .qt-qb .qt-qb-num {
2673
+ min-height: 32px;
2674
+ padding: 0 8px;
2675
+ border-radius: 8px;
2676
+ }
2677
+ .qt-qb-num-combo {
2678
+ display: flex;
2679
+ min-width: 0;
2680
+ }
2681
+ .qt-qb-num-combo > .qt-qb-num {
2682
+ flex: 1;
2683
+ min-width: 0;
2684
+ border-radius: 8px 0 0 8px;
2685
+ }
2686
+ .qt-qb-num-step {
2687
+ min-width: 44px;
2688
+ padding: 0 10px;
2689
+ font-size: 13px;
2690
+ touch-action: manipulation;
2691
+ }
2692
+ .qt-qb-num-step:last-child {
2693
+ border-radius: 0 8px 8px 0;
2694
+ }
2695
+ .qt-qt-section-head {
2696
+ padding: 2px 8px 2px 36px;
2697
+ }
2698
+ .qt-metrics {
2699
+ padding: 8px;
2700
+ gap: 8px;
2701
+ }
2702
+ .qt-th,
2703
+ .qt-cell {
2704
+ height: 44px;
2705
+ padding-top: 6px;
2706
+ padding-bottom: 6px;
2707
+ }
2708
+ .qt-qb .qt-qb-saved-star,
2709
+ .qt-qb .qt-qb-saved-cancel {
2710
+ min-width: 44px;
2711
+ min-height: 44px;
2712
+ }
2713
+ .qt-qb-state-bar .qt-qb-saved-star,
2714
+ .qt-qb-state-bar .qt-qb-saved-cancel {
2715
+ min-width: 32px;
2716
+ min-height: 32px;
2717
+ }
2718
+ .qt-qt-section-toggle {
2719
+ width: 24px;
2720
+ min-width: 24px;
2721
+ height: 24px;
2722
+ min-height: 24px;
2723
+ top: 12px;
2724
+ left: 6px;
2725
+ }
2726
+ .qt-qb-state-bar .qt-qb-collapse-btn,
2727
+ .qt-qt-section-toggle {
2728
+ border-color: transparent;
2729
+ background: transparent;
2730
+ }
2731
+ .qt-qb-state-bar .qt-qb-collapse-btn::before,
2732
+ .qt-qt-section-toggle::before {
2733
+ content: "";
2734
+ position: absolute;
2735
+ inset: -10px;
2736
+ }
2737
+ .qt-qb-collapse-caret,
2738
+ .qt-qt-section-toggle-caret {
2739
+ width: 14px;
2740
+ height: 14px;
2741
+ }
2742
+ .qt-qb .qt-chip-x,
2743
+ .qt-qb .qt-chip-op-btn {
2744
+ min-height: 32px;
2745
+ min-width: 32px;
2746
+ padding-top: 0;
2747
+ padding-bottom: 0;
2748
+ }
2749
+ .qt-qb .qt-chip-op,
2750
+ .qt-qb .qt-chip-val {
2751
+ min-height: 32px;
2752
+ font-size: 16px;
2753
+ max-width: 100%;
2754
+ }
2755
+ .qt-qb-editor-bar .qt-btn,
2756
+ .qt-qb-editor-bar .qt-add,
2757
+ .qt-qb-editor-bar .qt-link-btn {
2758
+ min-height: 32px;
2759
+ padding: 0 8px;
2760
+ }
2761
+ .qt-qb-editor-bar .qt-qb-row:not(.qt-qb-pagination) > .qt-qb-kw[data-mobile-label] {
2762
+ flex: 1 0 auto;
2763
+ align-self: center;
2764
+ width: auto;
2765
+ font-size: 0;
2766
+ }
2767
+ .qt-qb-kw[data-mobile-label]::after {
2768
+ content: attr(data-mobile-label);
2769
+ font-size: 14px;
2770
+ font-weight: 650;
2771
+ letter-spacing: 0;
2772
+ text-transform: none;
2773
+ color: var(--qt-text);
2774
+ }
2775
+ .qt-sheet .qt-reorder-handle {
2776
+ touch-action: none;
2777
+ }
2778
+ .qt-qb-row > .qt-chip--col:not(.qt-chip--sort) {
2779
+ max-width: 100%;
2780
+ }
2781
+ .qt-chip--sort {
2782
+ flex: 1 0 100%;
2783
+ max-width: 100%;
2784
+ }
2785
+ .qt-chip--sort > .qt-chip-field {
2786
+ flex: 1;
2787
+ }
2788
+ .qt-chip--sort > .qt-chip-x {
2789
+ margin-left: auto;
2790
+ }
2791
+ .qt-where-term-wrap {
2792
+ flex: 1 0 100%;
2793
+ max-width: 100%;
2794
+ }
2795
+ .qt-mobile-clause {
2796
+ display: flex;
2797
+ align-items: stretch;
2798
+ flex: 1 0 100%;
2799
+ width: 100%;
2800
+ max-width: 100%;
2801
+ min-width: 0;
2802
+ min-height: 32px;
2803
+ border-radius: 8px;
2804
+ background: var(--qt-bg, #fff);
2805
+ box-shadow: inset 0 0 0 1px var(--qt-border);
2806
+ overflow: hidden;
2807
+ }
2808
+ .qt-mobile-clause:focus-within {
2809
+ outline: 2px solid var(--qt-accent);
2810
+ outline-offset: 2px;
2811
+ }
2812
+ .qt-mobile-filter {
2813
+ display: flex;
2814
+ align-items: center;
2815
+ justify-content: space-between;
2816
+ flex: 1;
2817
+ gap: 6px;
2818
+ min-width: 0;
2819
+ min-height: 32px;
2820
+ padding: 0 8px;
2821
+ border: 0;
2822
+ border-radius: 0;
2823
+ background: transparent;
2824
+ color: var(--qt-text);
2825
+ font: inherit;
2826
+ text-align: left;
2827
+ cursor: pointer;
2828
+ touch-action: manipulation;
2829
+ }
2830
+ .qt-mobile-filter:hover:not(:disabled) {
2831
+ background: var(--qt-accent-bg);
2832
+ }
2833
+ .qt-mobile-clause button:disabled {
2834
+ cursor: default;
2835
+ opacity: 0.5;
2836
+ }
2837
+ .qt-mobile-filter > span:first-child {
2838
+ flex: 1;
2839
+ min-width: 0;
2840
+ }
2841
+ .qt-mobile-filter-summary {
2842
+ display: flex;
2843
+ flex-direction: row;
2844
+ flex-wrap: wrap;
2845
+ align-items: baseline;
2846
+ column-gap: 6px;
2847
+ row-gap: 0;
2848
+ overflow-wrap: anywhere;
2849
+ font-size: 13px;
2850
+ line-height: 16px;
2851
+ }
2852
+ .qt-mobile-filter-summary > span {
2853
+ color: var(--qt-muted);
2854
+ font-size: 13px;
2855
+ }
2856
+ .qt-mobile-filter-summary > small {
2857
+ color: var(--qt-accent);
2858
+ font-size: 12px;
2859
+ }
2860
+ .qt-mobile-filter-edit {
2861
+ display: inline-flex;
2862
+ align-items: center;
2863
+ flex-shrink: 0;
2864
+ color: var(--qt-accent);
2865
+ }
2866
+ .qt-qb-section-header {
2867
+ display: flex;
2868
+ align-items: center;
2869
+ flex-wrap: wrap;
2870
+ gap: 6px;
2871
+ flex: 1 0 100%;
2872
+ min-width: 0;
2873
+ }
2874
+ .qt-qb-section-header > .qt-qb-kw {
2875
+ flex: 1;
2876
+ min-width: 0;
2877
+ width: auto;
2878
+ font-size: 0;
2879
+ }
2880
+ .qt-qb-section-header > .qt-add {
2881
+ font-size: 0;
2882
+ gap: 0;
2883
+ }
2884
+ .qt-qb-section-header > .qt-add::after {
2885
+ content: "Add";
2886
+ font-size: 12px;
2887
+ margin-left: 4px;
2888
+ }
2889
+ .qt-qb-section-header > .qt-btn,
2890
+ .qt-qb-section-header > .qt-add,
2891
+ .qt-qb-section-header > .qt-link-btn {
2892
+ padding: 0 6px;
2893
+ min-width: 0;
2894
+ }
2895
+ .qt-qb-section-header > .qt-add,
2896
+ .qt-qb .qt-split-btn > .qt-add:first-child {
2897
+ padding-right: 8px;
2898
+ }
2899
+ .qt-split-btn {
2900
+ height: 32px;
2901
+ }
2902
+ .qt-qb .qt-split-btn > .qt-split-btn-caret {
2903
+ width: 28px;
2904
+ }
2905
+ .qt-qb-row--filters > .qt-qb-hint,
2906
+ .qt-qb-row--sort > .qt-qb-hint,
2907
+ .qt-qb-row--metrics > .qt-qb-hint {
2908
+ flex-basis: 100%;
2909
+ }
2910
+ .qt-query-reorder-list {
2911
+ display: flex;
2912
+ flex-direction: column;
2913
+ gap: 4px;
2914
+ flex: 1 0 100%;
2915
+ width: 100%;
2916
+ max-width: 100%;
2917
+ min-width: 0;
2918
+ padding: 0;
2919
+ overflow: visible;
2920
+ }
2921
+ .qt-query-reorder-list > .qt-reorder-item {
2922
+ min-height: 32px;
2923
+ max-width: 100%;
2924
+ min-width: 0;
2925
+ padding: 0;
2926
+ gap: 0;
2927
+ border: 0;
2928
+ border-radius: 8px;
2929
+ box-shadow: inset 0 0 0 1px var(--qt-border);
2930
+ }
2931
+ .qt-query-reorder-list > .qt-reorder-item {
2932
+ overflow: hidden;
2933
+ }
2934
+ .qt-query-reorder-list > .qt-reorder-item:hover:not(:has(:disabled)) {
2935
+ background: var(--qt-accent-bg);
2936
+ }
2937
+ .qt-query-reorder-list .qt-mobile-filter:hover:not(:disabled) {
2938
+ background: transparent;
2939
+ }
2940
+ .qt-query-reorder-list > .qt-reorder-item:focus-within {
2941
+ outline: 2px solid var(--qt-accent);
2942
+ outline-offset: 2px;
2943
+ }
2944
+ .qt-query-reorder-list .qt-reorder-handle {
2945
+ flex-shrink: 0;
2946
+ min-width: 24px;
2947
+ min-height: 32px;
2948
+ padding: 0;
2949
+ font-size: 20px;
2950
+ }
2951
+ .qt-query-reorder-list .qt-reorder-handle > .qt-icon {
2952
+ width: 12px;
2953
+ }
2954
+ .qt-query-reorder-list .qt-mobile-filter {
2955
+ padding-left: 4px;
2956
+ }
2957
+ .qt-query-reorder-list .qt-mobile-clause {
2958
+ flex: 1;
2959
+ box-shadow: none;
2960
+ border-radius: 0;
2961
+ background: transparent;
2962
+ }
2963
+ .qt-query-reorder-list .qt-reorder-item--dragging {
2964
+ position: relative;
2965
+ z-index: 1;
2966
+ box-shadow: 0 0 0 2px var(--qt-accent);
2967
+ }
2968
+ .qt-query-reorder-list--columns {
2969
+ flex-direction: row;
2970
+ flex-wrap: wrap;
2971
+ }
2972
+ .qt-query-reorder-list--columns .qt-chip-field {
2973
+ min-width: 0;
2974
+ padding-right: 4px;
2975
+ font-size: 13px;
2976
+ overflow-wrap: anywhere;
2977
+ }
2978
+ .qt-overlay-backdrop--mobile {
2979
+ inset: 0;
2980
+ padding: max(12px, env(safe-area-inset-top)) 0 0;
2981
+ align-items: flex-end;
2982
+ background: rgba(15, 23, 42, 0.42);
2983
+ }
2984
+ .qt-modal-surface.qt-sheet {
2985
+ width: 100%;
2986
+ max-width: none;
2987
+ max-height: 100%;
2988
+ border: 0;
2989
+ border-radius: 20px 20px 0 0;
2990
+ box-shadow: 0 -8px 40px #0002;
2991
+ padding: 0 0 env(safe-area-inset-bottom);
2992
+ animation: qt-sheet-enter 180ms ease-out;
2993
+ }
2994
+ .qt-sheet-handle {
2995
+ display: flex;
2996
+ align-items: center;
2997
+ justify-content: center;
2998
+ min-height: 16px;
2999
+ flex-shrink: 0;
3000
+ touch-action: none;
3001
+ cursor: grab;
3002
+ }
3003
+ .qt-sheet-handle span {
3004
+ width: 36px;
3005
+ height: 4px;
3006
+ border-radius: 4px;
3007
+ background: var(--qt-border);
3008
+ }
3009
+ .qt-overlay-header {
3010
+ padding: 0 12px 6px;
3011
+ }
3012
+ .qt-overlay-header h2 {
3013
+ font-size: 18px;
3014
+ }
3015
+ .qt-overlay-header .qt-btn {
3016
+ font-size: 15px;
3017
+ border: 0;
3018
+ background: transparent;
3019
+ }
3020
+ .qt-sheet .qt-overlay-body {
3021
+ padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
3022
+ }
3023
+ .qt-sheet .qt-sort-extract-footer {
3024
+ padding: 8px 12px;
3025
+ }
3026
+ .qt-sheet .qt-sort-extract-footer > button {
3027
+ min-height: 32px;
3028
+ padding: 0 8px;
3029
+ }
3030
+ .qt-sheet .qt-reorder-hint {
3031
+ padding: 6px 12px;
3032
+ font-size: 13px;
3033
+ }
3034
+ .qt-sheet .qt-reorder-list {
3035
+ padding: 0 12px 8px;
3036
+ }
3037
+ .qt-sheet .qt-reorder-item {
3038
+ min-height: 32px;
3039
+ padding: 0;
3040
+ gap: 4px;
3041
+ }
3042
+ .qt-sheet .qt-reorder-handle {
3043
+ min-width: 32px;
3044
+ min-height: 32px;
3045
+ padding: 0;
3046
+ font-size: 20px;
3047
+ }
3048
+ .qt-sheet .qt-picker {
3049
+ display: flex;
3050
+ flex-direction: column;
3051
+ padding: 10px 12px;
3052
+ flex: 0 1 auto;
3053
+ min-height: 0;
3054
+ }
3055
+ .qt-sheet .qt-picker-input {
3056
+ flex-shrink: 0;
3057
+ min-height: 44px;
3058
+ padding: 6px 10px;
3059
+ border-radius: 10px;
3060
+ }
3061
+ .qt-sheet .qt-picker-list {
3062
+ position: static;
3063
+ width: 100%;
3064
+ max-width: none;
3065
+ max-height: none;
3066
+ min-height: 0;
3067
+ margin-top: 6px;
3068
+ border: 0;
3069
+ box-shadow: none;
3070
+ overscroll-behavior: contain;
3071
+ }
3072
+ .qt-sheet .qt-picker-item {
3073
+ padding: 6px 4px;
3074
+ min-height: 44px;
3075
+ border-bottom: 1px solid var(--qt-border-subtle);
3076
+ }
3077
+ .qt-sheet .qt-picker-row {
3078
+ align-items: center;
3079
+ }
3080
+ .qt-sheet .qt-picker-group-label {
3081
+ padding: 4px;
3082
+ }
3083
+ .qt-sheet .qt-picker-label,
3084
+ .qt-sheet .qt-picker-name {
3085
+ overflow-wrap: anywhere;
3086
+ min-width: 0;
3087
+ }
3088
+ .qt-sheet .qt-picker-name {
3089
+ font-size: 12px;
3090
+ }
3091
+ .qt-sheet .qt-cell-menu,
3092
+ .qt-sheet .qt-op-pop,
3093
+ .qt-sheet .qt-auto-refresh-popover,
3094
+ .qt-sheet .qt-value-picker-pop {
3095
+ position: static !important;
3096
+ inset: auto !important;
3097
+ width: 100% !important;
3098
+ min-width: 0;
3099
+ max-height: none;
3100
+ min-height: 0;
3101
+ overflow-y: auto;
3102
+ border: 0;
3103
+ border-radius: 0;
3104
+ box-shadow: none;
3105
+ padding: 8px 12px;
3106
+ overscroll-behavior: contain;
3107
+ }
3108
+ .qt-sheet .qt-op-pop {
3109
+ display: grid;
3110
+ font-size: 15px;
3111
+ }
3112
+ .qt-sheet .qt-op-cell {
3113
+ padding: 6px 8px;
3114
+ min-height: 44px;
3115
+ font-size: 15px;
3116
+ }
3117
+ .qt-sheet .qt-auto-refresh-popover {
3118
+ display: flex;
3119
+ gap: 8px;
3120
+ }
3121
+ .qt-sheet .qt-auto-refresh-field {
3122
+ flex-wrap: wrap;
3123
+ gap: 6px;
3124
+ }
3125
+ .qt-sheet .qt-auto-refresh-select {
3126
+ font-size: 16px;
3127
+ width: auto;
3128
+ flex: 1;
3129
+ }
3130
+ .qt-sheet .qt-value-picker-pop {
3131
+ gap: 6px;
3132
+ }
3133
+ .qt-sheet .qt-value-picker-pop > input {
3134
+ font-size: 16px;
3135
+ padding: 6px 10px;
3136
+ flex-shrink: 0;
3137
+ }
3138
+ .qt-sheet .qt-value-picker-list button {
3139
+ min-height: 44px;
3140
+ font-size: 16px;
3141
+ padding: 6px 8px;
3142
+ }
3143
+ .qt-filter-editor .qt-pred {
3144
+ display: flex;
3145
+ flex-wrap: wrap;
3146
+ gap: 6px;
3147
+ padding-bottom: 8px;
3148
+ margin-bottom: 8px;
3149
+ border-bottom: 1px solid var(--qt-border-subtle);
3150
+ }
3151
+ .qt-filter-editor .qt-pred > .qt-chip-field {
3152
+ flex: 1 0 100%;
3153
+ font-size: 15px;
3154
+ }
3155
+ .qt-filter-editor > p {
3156
+ margin: 6px 0;
3157
+ }
3158
+ .qt-filter-editor .qt-autocomplete,
3159
+ .qt-filter-editor .qt-value-picker {
3160
+ flex: 1;
3161
+ min-width: 0;
3162
+ }
3163
+ .qt-filter-editor .qt-chip-val {
3164
+ width: 100% !important;
3165
+ min-width: 0;
3166
+ min-height: 44px;
3167
+ font-size: 16px;
3168
+ padding: 6px 8px;
3169
+ }
3170
+ .qt-filter-editor .qt-chip-op-btn {
3171
+ min-height: 44px;
3172
+ font-size: 16px;
3173
+ padding: 6px 8px;
3174
+ }
3175
+ .qt-filter-editor .qt-chip-x {
3176
+ min-width: 44px;
3177
+ min-height: 44px;
3178
+ }
3179
+ .qt-filter-combine {
3180
+ display: flex;
3181
+ flex-direction: column;
3182
+ gap: 6px;
3183
+ font-size: 14px;
3184
+ }
3185
+ .qt-filter-combine select {
3186
+ width: 100%;
3187
+ font-size: 16px;
3188
+ }
3189
+ .qt-mobile-form {
3190
+ display: grid;
3191
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3192
+ gap: 8px;
3193
+ min-width: 0;
3194
+ }
3195
+ .qt-mobile-form-field {
3196
+ display: flex;
3197
+ flex-direction: column;
3198
+ gap: 4px;
3199
+ min-width: 0;
3200
+ margin: 0;
3201
+ }
3202
+ .qt-mobile-form-field > span:first-child {
3203
+ color: var(--qt-muted);
3204
+ font-size: 12px;
3205
+ font-weight: 600;
3206
+ }
3207
+ .qt-mobile-form-field--wide,
3208
+ .qt-mobile-form-actions,
3209
+ .qt-mobile-form-hint,
3210
+ .qt-mobile-form > .qt-mobile-form-remove {
3211
+ grid-column: 1 / -1;
3212
+ }
3213
+ .qt-mobile-form select,
3214
+ .qt-mobile-form input,
3215
+ .qt-mobile-form .qt-value-picker,
3216
+ .qt-mobile-form .qt-autocomplete,
3217
+ .qt-mobile-form .qt-op-wrap {
3218
+ width: 100% !important;
3219
+ min-width: 0;
3220
+ max-width: 100%;
3221
+ box-sizing: border-box;
3222
+ }
3223
+ .qt-mobile-form select,
3224
+ .qt-mobile-form input,
3225
+ .qt-mobile-form .qt-chip-val,
3226
+ .qt-mobile-form .qt-chip-op-btn {
3227
+ min-height: 36px;
3228
+ padding: 0 8px;
3229
+ font-size: 16px;
3230
+ border: 1px solid var(--qt-border);
3231
+ border-radius: 8px;
3232
+ background: var(--qt-bg, #fff);
3233
+ color: var(--qt-text);
3234
+ }
3235
+ .qt-mobile-form .qt-chip-op-btn {
3236
+ width: 100%;
3237
+ height: 100%;
3238
+ white-space: normal;
3239
+ overflow-wrap: anywhere;
3240
+ text-align: left;
3241
+ }
3242
+ .qt-mobile-form .qt-op-wrap {
3243
+ display: flex;
3244
+ flex: 1;
3245
+ }
3246
+ .qt-mobile-form-inline,
3247
+ .qt-mobile-form-actions {
3248
+ display: flex;
3249
+ align-items: center;
3250
+ gap: 6px;
3251
+ min-width: 0;
3252
+ }
3253
+ .qt-mobile-form-inline input {
3254
+ flex: 1;
3255
+ }
3256
+ .qt-mobile-form-inline .qt-btn {
3257
+ flex-shrink: 0;
3258
+ min-width: 44px;
3259
+ min-height: 44px;
3260
+ }
3261
+ .qt-mobile-form-actions {
3262
+ justify-content: space-between;
3263
+ border-top: 1px solid var(--qt-border-subtle);
3264
+ }
3265
+ .qt-mobile-form-remove {
3266
+ min-height: 32px;
3267
+ padding: 0 8px;
3268
+ border: 0;
3269
+ border-radius: 8px;
3270
+ background: transparent;
3271
+ color: var(--qt-fail-fg);
3272
+ font: inherit;
3273
+ font-size: 14px;
3274
+ text-align: left;
3275
+ touch-action: manipulation;
3276
+ }
3277
+ .qt-sheet .qt-mobile-form-remove {
3278
+ min-height: 32px;
3279
+ }
3280
+ .qt-mobile-form > .qt-mobile-form-remove {
3281
+ border-top: 1px solid var(--qt-border-subtle);
3282
+ border-radius: 0;
3283
+ }
3284
+ .qt-mobile-form-hint {
3285
+ margin: 0;
3286
+ color: var(--qt-muted);
3287
+ font-size: 12px;
3288
+ line-height: 1.4;
3289
+ }
3290
+ .qt-mobile-form .qt-chip-agg-by {
3291
+ display: flex;
3292
+ align-items: center;
3293
+ flex-wrap: wrap;
3294
+ gap: 6px;
3295
+ min-width: 0;
3296
+ }
3297
+ .qt-mobile-form .qt-chip-agg-group {
3298
+ display: inline-flex;
3299
+ align-items: center;
3300
+ min-height: 32px;
3301
+ max-width: 100%;
3302
+ padding-left: 8px;
3303
+ border: 1px solid var(--qt-border);
3304
+ border-radius: 8px;
3305
+ font-size: 14px;
3306
+ }
3307
+ .qt-mobile-form .qt-chip-agg-group-label {
3308
+ min-width: 0;
3309
+ overflow-wrap: anywhere;
3310
+ }
3311
+ .qt-sheet .qt-mobile-form .qt-chip-x,
3312
+ .qt-sheet .qt-mobile-form .qt-chip-agg-add {
3313
+ flex-shrink: 0;
3314
+ min-width: 32px;
3315
+ min-height: 32px;
3316
+ padding-top: 0;
3317
+ padding-bottom: 0;
3318
+ }
3319
+ .qt-mobile-predicate + p {
3320
+ padding-top: 6px;
3321
+ border-top: 1px solid var(--qt-border-subtle);
3322
+ font-size: 12px;
3323
+ font-weight: 600;
3324
+ }
3325
+ .qt-filter-combine {
3326
+ margin-top: 8px;
3327
+ font-size: 12px;
3328
+ }
3329
+ .qt-filter-combine select {
3330
+ min-width: 0;
3331
+ min-height: 44px;
3332
+ padding: 6px 8px;
3333
+ border: 1px solid var(--qt-border);
3334
+ border-radius: 8px;
3335
+ background: var(--qt-bg, #fff);
3336
+ color: var(--qt-text);
3337
+ }
3338
+ .qt-metric--gb0 {
3339
+ flex: 1 1 calc(50% - 4px);
3340
+ padding: 8px;
3341
+ }
3342
+ .qt-metric--gb1,
3343
+ .qt-metric--gb2,
3344
+ .qt-metric--gb3 {
3345
+ flex: 1 0 100%;
3346
+ padding: 8px;
3347
+ }
3348
+ .qt-metric-head {
3349
+ min-width: 0;
3350
+ overflow-wrap: anywhere;
3351
+ }
3352
+ .qt-metric-big-value {
3353
+ font-size: 24px;
3354
+ overflow-wrap: anywhere;
3355
+ }
3356
+ .qt-sheet.qt-select-editor {
3357
+ height: 100%;
3358
+ }
3359
+ .qt-sheet.qt-select-editor--selected {
3360
+ height: auto;
3361
+ }
3362
+ .qt-sheet .qt-select-editor-header {
3363
+ padding: 0 12px 6px;
3364
+ }
3365
+ .qt-sheet .qt-select-editor-header h2 {
3366
+ margin: 0;
3367
+ font-size: 18px;
3368
+ }
3369
+ .qt-sheet .qt-select-editor-header p {
3370
+ display: none;
3371
+ }
3372
+ .qt-editor-mobile-nav {
3373
+ display: flex;
3374
+ gap: 4px;
3375
+ padding: 4px 8px;
3376
+ border-bottom: 1px solid var(--qt-border-subtle);
3377
+ flex-shrink: 0;
3378
+ }
3379
+ .qt-editor-mobile-nav .qt-btn {
3380
+ flex: 1;
3381
+ justify-content: center;
3382
+ font-size: 13px;
3383
+ border: 0;
3384
+ background: transparent;
3385
+ }
3386
+ .qt-editor-mobile-nav .qt-btn[aria-pressed=true] {
3387
+ color: var(--qt-accent);
3388
+ background: var(--qt-accent-bg);
3389
+ border-radius: 8px;
3390
+ font-weight: 650;
3391
+ }
3392
+ .qt-sheet .qt-select-editor-body {
3393
+ display: block;
3394
+ flex: 1;
3395
+ min-height: 0;
3396
+ overflow-y: auto;
3397
+ overscroll-behavior: contain;
3398
+ }
3399
+ .qt-sheet .qt-selected-panel,
3400
+ .qt-sheet .qt-catalogue-panel,
3401
+ .qt-sheet .qt-column-workbench {
3402
+ display: none;
3403
+ max-height: none;
3404
+ overflow: visible;
3405
+ border: 0;
3406
+ padding: 8px 12px;
3407
+ }
3408
+ .qt-select-editor-body--selected > .qt-selected-panel,
3409
+ .qt-select-editor-body--catalogue > .qt-catalogue-panel,
3410
+ .qt-select-editor-body--preview > .qt-column-workbench {
3411
+ display: block;
3412
+ }
3413
+ .qt-sheet .qt-editor-move {
3414
+ display: none;
3415
+ }
3416
+ .qt-sheet .qt-selected-panel > h3 {
3417
+ display: none;
3418
+ }
3419
+ .qt-sheet .qt-editor-columns {
3420
+ margin: 0 0 4px;
3421
+ padding: 0;
3422
+ overflow: visible;
3423
+ }
3424
+ .qt-sheet .qt-editor-columns li {
3425
+ min-height: 32px;
3426
+ margin-bottom: 2px;
3427
+ padding: 0;
3428
+ gap: 4px;
3429
+ }
3430
+ .qt-sheet .qt-editor-columns li > span[aria-hidden] {
3431
+ display: none;
3432
+ }
3433
+ .qt-sheet .qt-icon-btn,
3434
+ .qt-sheet .qt-column-name {
3435
+ min-width: 32px;
3436
+ min-height: 32px;
3437
+ padding-top: 0;
3438
+ padding-bottom: 0;
3439
+ }
3440
+ .qt-sheet .qt-input,
3441
+ .qt-sheet textarea,
3442
+ .qt-sheet .qt-preview-controls select,
3443
+ .qt-sheet .qt-preview-controls input {
3444
+ max-width: 100%;
3445
+ font-size: 16px;
3446
+ padding: 6px 8px;
3447
+ }
3448
+ .qt-sheet .qt-catalogue-list {
3449
+ max-height: none;
3450
+ }
3451
+ .qt-sheet .qt-select-editor-footer {
3452
+ padding: 8px 12px;
3453
+ gap: 6px;
3454
+ flex-shrink: 0;
3455
+ background: var(--qt-bg, #fff);
3456
+ }
3457
+ .qt-sheet .qt-select-editor-footer > span {
3458
+ flex: 1 0 100%;
3459
+ }
3460
+ .qt-sheet .qt-select-editor-footer > button {
3461
+ flex: 1;
3462
+ justify-content: center;
3463
+ }
3464
+ .qt-selection-toolbar {
3465
+ position: sticky;
3466
+ bottom: 0;
3467
+ z-index: 5;
3468
+ padding-bottom: max(10px, env(safe-area-inset-bottom));
3469
+ box-shadow: 0 -4px 16px #0001;
3470
+ }
3471
+ .qt-sheet .qt-saved-item {
3472
+ padding: 6px 0;
3473
+ }
3474
+ .qt-sheet .qt-cm-header {
3475
+ padding: 4px 8px 6px;
3476
+ }
3477
+ .qt-sheet .qt-cm-item {
3478
+ padding: 6px 8px;
3479
+ }
3480
+ .qt-sheet .qt-preview-controls {
3481
+ padding-top: 8px;
3482
+ margin-top: 8px;
3483
+ gap: 6px;
3484
+ }
3485
+ .qt-sheet .qt-definition-actions {
3486
+ margin-top: 6px;
3487
+ margin-bottom: 6px;
3488
+ gap: 6px;
3489
+ }
3490
+ .qt-sheet .qt-saved-name {
3491
+ overflow-wrap: anywhere;
3492
+ }
3493
+ .qt-sheet .qt-cm-value {
3494
+ white-space: normal;
3495
+ overflow-wrap: anywhere;
3496
+ }
3497
+ }
3498
+ @keyframes qt-sheet-enter {
3499
+ from {
3500
+ transform: translateY(32px);
3501
+ opacity: 0.6;
3502
+ }
3503
+ to {
3504
+ transform: translateY(0);
3505
+ opacity: 1;
3506
+ }
3507
+ }
3508
+ @media (prefers-reduced-motion: reduce) {
3509
+ .qt-modal-surface.qt-sheet {
3510
+ animation: none;
3511
+ }
3512
+ }
3513
+ .qt-set-backdrop {
3514
+ position: fixed;
3515
+ inset: 0;
3516
+ z-index: 100;
3517
+ display: flex;
3518
+ align-items: center;
3519
+ justify-content: center;
3520
+ background: rgba(0, 0, 0, 0.25);
3521
+ }
3522
+ .qt-set-editor {
3523
+ position: fixed;
3524
+ box-sizing: border-box;
3525
+ width: min(440px, calc(100vw - 32px));
3526
+ max-height: calc(100dvh - 32px);
3527
+ overflow: auto;
3528
+ background: var(--qt-header-bg);
3529
+ color: var(--qt-text);
3530
+ border: 1px solid var(--qt-border);
3531
+ border-radius: var(--qt-radius);
3532
+ padding: 16px;
3533
+ display: flex;
3534
+ flex-direction: column;
3535
+ gap: 12px;
3536
+ }
3537
+ .qt-set-editor h3 {
3538
+ margin: 0;
3539
+ }
3540
+ .qt-set-editor select,
3541
+ .qt-set-editor > input {
3542
+ width: 100%;
3543
+ box-sizing: border-box;
3544
+ }
3545
+ .qt-set-selected,
3546
+ .qt-set-actions {
3547
+ display: flex;
3548
+ flex-wrap: wrap;
3549
+ gap: 8px;
3550
+ }
3551
+ .qt-set-actions {
3552
+ justify-content: flex-end;
3553
+ }
3554
+ .qt-set-options {
3555
+ overflow: auto;
3556
+ max-height: 240px;
3557
+ }
3558
+ .qt-set-option {
3559
+ display: flex;
3560
+ align-items: center;
3561
+ gap: 8px;
3562
+ padding: 6px;
3563
+ }
3564
+ .qt-set-option small {
3565
+ color: var(--qt-muted);
3566
+ }
3567
+ .qt-set-tag {
3568
+ display: inline-flex;
3569
+ align-items: center;
3570
+ gap: 4px;
3571
+ }
3572
+ @media (max-width: 600px) {
3573
+ .qt-set-editor {
3574
+ top: auto !important;
3575
+ left: 0 !important;
3576
+ bottom: 0;
3577
+ width: 100%;
3578
+ max-height: 85dvh;
3579
+ border-radius: var(--qt-radius) var(--qt-radius) 0 0;
3580
+ }
3581
+ }
2255
3582
  /*# sourceMappingURL=theme.css.map */