@altertable/data-app 0.61.0 → 0.63.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.
Files changed (159) hide show
  1. package/AGENTS.md +4 -32
  2. package/CONTRIBUTING.md +63 -72
  3. package/README.md +14 -38
  4. package/dist/chunks/{contract-d9skd1n7.js → contract-8wdybxj7.js} +163 -16
  5. package/dist/chunks/contract-8wdybxj7.js.map +13 -0
  6. package/dist/chunks/{contract-ryyf6dme.js → contract-cxr9t12b.js} +2 -5
  7. package/dist/chunks/contract-cxr9t12b.js.map +10 -0
  8. package/dist/chunks/{contract-14vxdcrs.js → contract-farfe948.js} +17 -21
  9. package/dist/chunks/contract-farfe948.js.map +10 -0
  10. package/dist/chunks/contract-mev09s5v.js.map +2 -2
  11. package/dist/chunks/{contract-ehk50k7e.js → contract-tf8c3qpv.js} +34 -4
  12. package/dist/chunks/contract-tf8c3qpv.js.map +11 -0
  13. package/dist/chunks/{contract-zr4s2g7m.js → contract-tkc552ze.js} +75 -36
  14. package/dist/chunks/contract-tkc552ze.js.map +12 -0
  15. package/dist/chunks/{contract-nt819swq.js → contract-wd8qe3mt.js} +6 -1
  16. package/dist/chunks/{contract-nt819swq.js.map → contract-wd8qe3mt.js.map} +3 -3
  17. package/dist/chunks/contract-wz59z8pq.js.map +1 -1
  18. package/dist/chunks/{contract-7gpsee0v.js → contract-zr3jd7mr.js} +51 -22
  19. package/dist/chunks/contract-zr3jd7mr.js.map +12 -0
  20. package/dist/client/index.js +7 -6
  21. package/dist/client/index.js.map +1 -1
  22. package/dist/core/appearance.js +1 -1
  23. package/dist/core/contract.js +6 -4
  24. package/dist/core/contract.js.map +1 -1
  25. package/dist/embed/index.js +41 -9
  26. package/dist/embed/index.js.map +5 -4
  27. package/dist/local.js +172 -84
  28. package/dist/local.js.map +7 -8
  29. package/dist/react/embed/index.js +83 -99
  30. package/dist/react/embed/index.js.map +4 -5
  31. package/dist/react/index.js +5701 -324
  32. package/dist/react/index.js.map +74 -65
  33. package/dist/server.js +153 -81
  34. package/dist/server.js.map +6 -7
  35. package/dist/types/client/data-client.d.ts +33 -0
  36. package/dist/types/client/iframe.d.ts +14 -0
  37. package/dist/types/client/index.d.ts +4 -34
  38. package/dist/types/client/location.d.ts +4 -6
  39. package/dist/types/client/navigation.d.ts +2 -1
  40. package/dist/types/core/appearance.d.ts +7 -6
  41. package/dist/types/core/bridge.d.ts +2 -8
  42. package/dist/types/core/config.d.ts +1 -1
  43. package/dist/types/core/contract.d.ts +9 -56
  44. package/dist/types/core/format.d.ts +0 -1
  45. package/dist/types/core/messages.d.ts +11 -30
  46. package/dist/types/core/navigation.d.ts +11 -0
  47. package/dist/types/core/operation-types.d.ts +76 -0
  48. package/dist/types/core/operation.d.ts +21 -0
  49. package/dist/types/core/presentation.d.ts +7 -0
  50. package/dist/types/core/variables.d.ts +2 -2
  51. package/dist/types/embed/bridge.d.ts +12 -0
  52. package/dist/types/embed/host.d.ts +14 -5
  53. package/dist/types/embed/index.d.ts +6 -4
  54. package/dist/types/embed/source.d.ts +15 -0
  55. package/dist/types/embed/sql.d.ts +4 -0
  56. package/dist/types/react/content.d.ts +3 -3
  57. package/dist/types/react/embed/bridge.d.ts +19 -10
  58. package/dist/types/react/embed/index.d.ts +0 -2
  59. package/dist/types/react/hooks.d.ts +65 -64
  60. package/dist/types/react/index.d.ts +135 -2
  61. package/dist/types/react/injectStyles.d.ts +7 -0
  62. package/dist/types/react/shellStyles.d.ts +3 -0
  63. package/dist/types/react/styles.d.ts +8 -0
  64. package/dist/types/react/ui/AboutData.d.ts +0 -1
  65. package/dist/types/react/ui/AppFooter.d.ts +0 -1
  66. package/dist/types/react/ui/AppHeader.d.ts +0 -1
  67. package/dist/types/react/ui/AppLayout.d.ts +0 -1
  68. package/dist/types/react/ui/AppScope.d.ts +0 -1
  69. package/dist/types/react/ui/AppToolbar.d.ts +0 -1
  70. package/dist/types/react/ui/Breakdown.d.ts +0 -1
  71. package/dist/types/react/ui/Button.d.ts +0 -1
  72. package/dist/types/react/ui/Checkbox.d.ts +0 -1
  73. package/dist/types/react/ui/Combobox.d.ts +0 -1
  74. package/dist/types/react/ui/ComparisonVisual.d.ts +0 -1
  75. package/dist/types/react/ui/ContentSkeleton.d.ts +2 -5
  76. package/dist/types/react/ui/DataApp.d.ts +2 -2
  77. package/dist/types/react/ui/DataAppSkeleton.d.ts +7 -0
  78. package/dist/types/react/ui/DataBoundary.d.ts +0 -1
  79. package/dist/types/react/ui/DataSection.d.ts +2 -4
  80. package/dist/types/react/ui/DataTable.d.ts +2 -3
  81. package/dist/types/react/ui/DataViewToast.d.ts +0 -1
  82. package/dist/types/react/ui/DataWidget.d.ts +4 -14
  83. package/dist/types/react/ui/DateRangePicker.d.ts +0 -1
  84. package/dist/types/react/ui/DateTimeTooltip.d.ts +0 -1
  85. package/dist/types/react/ui/EmptyState.d.ts +2 -5
  86. package/dist/types/react/ui/GettingStarted.d.ts +0 -1
  87. package/dist/types/react/ui/GlossaryDefinition.d.ts +0 -1
  88. package/dist/types/react/ui/GlossaryExplanation.d.ts +0 -1
  89. package/dist/types/react/ui/GradientScroll.d.ts +0 -1
  90. package/dist/types/react/ui/Grid.d.ts +0 -1
  91. package/dist/types/react/ui/HelpPopover.d.ts +0 -2
  92. package/dist/types/react/ui/Kbd.d.ts +0 -1
  93. package/dist/types/react/ui/LiveControl.d.ts +0 -1
  94. package/dist/types/react/ui/MetricWidget.d.ts +0 -2
  95. package/dist/types/react/ui/PeriodSummary.d.ts +0 -1
  96. package/dist/types/react/ui/PresentStory.d.ts +0 -1
  97. package/dist/types/react/ui/QueryList.d.ts +0 -1
  98. package/dist/types/react/ui/Ranking.d.ts +0 -1
  99. package/dist/types/react/ui/RefreshControl.d.ts +0 -1
  100. package/dist/types/react/ui/RefreshRegion.d.ts +0 -1
  101. package/dist/types/react/ui/RequestHint.d.ts +0 -1
  102. package/dist/types/react/ui/SearchField.d.ts +0 -1
  103. package/dist/types/react/ui/SearchInput.d.ts +1 -2
  104. package/dist/types/react/ui/SearchMatch.d.ts +0 -1
  105. package/dist/types/react/ui/SelectableBarChart.d.ts +0 -1
  106. package/dist/types/react/ui/SelectionMark.d.ts +0 -1
  107. package/dist/types/react/ui/Sheet.d.ts +0 -1
  108. package/dist/types/react/ui/Skeleton.d.ts +0 -1
  109. package/dist/types/react/ui/Stack.d.ts +0 -1
  110. package/dist/types/react/ui/StatusPanel.d.ts +0 -1
  111. package/dist/types/react/ui/TableWidget.d.ts +2 -3
  112. package/dist/types/react/ui/Tabs.d.ts +0 -1
  113. package/dist/types/react/ui/TextContent.d.ts +4 -0
  114. package/dist/types/react/ui/TextWidget.d.ts +19 -0
  115. package/dist/types/react/ui/ThemeSelector.d.ts +0 -1
  116. package/dist/types/react/ui/Tooltip.d.ts +0 -1
  117. package/dist/types/react/ui/UpdatedAt.d.ts +0 -1
  118. package/dist/types/react/ui/VariableBar.d.ts +0 -1
  119. package/dist/types/react/ui/VisualizationWidget.d.ts +5 -13
  120. package/dist/types/react/ui/WidgetDisclosure.d.ts +0 -1
  121. package/dist/types/react/ui/WidgetViewTabs.d.ts +2 -3
  122. package/dist/types/react/ui/data-identifiers.d.ts +0 -1
  123. package/dist/types/react/ui/presentation.d.ts +19 -0
  124. package/dist/types/react/ui/useAppAppearance.d.ts +3 -0
  125. package/dist/types/react/ui/useDataAppPresentation.d.ts +3 -0
  126. package/dist/types/react/view-controls.d.ts +2 -2
  127. package/dist/types/react/view.d.ts +2 -2
  128. package/dist/{bootstrap.js → worker.js} +144 -12
  129. package/docs/app-authoring.md +60 -24
  130. package/docs/client.md +48 -19
  131. package/docs/contract.md +10 -10
  132. package/docs/embed.md +94 -26
  133. package/docs/hosted-apps.md +39 -0
  134. package/docs/local-data-apps.md +14 -0
  135. package/docs/react-embed.md +75 -24
  136. package/docs/react.md +118 -93
  137. package/docs/server-bun.md +4 -1
  138. package/docs/server.md +2 -2
  139. package/docs/worker.md +55 -0
  140. package/examples/starter-data-app/index.tsx +159 -0
  141. package/package.json +18 -12
  142. package/dist/chunks/contract-14vxdcrs.js.map +0 -10
  143. package/dist/chunks/contract-7gpsee0v.js.map +0 -11
  144. package/dist/chunks/contract-d9skd1n7.js.map +0 -12
  145. package/dist/chunks/contract-ehk50k7e.js.map +0 -10
  146. package/dist/chunks/contract-ryyf6dme.js.map +0 -10
  147. package/dist/chunks/contract-zr4s2g7m.js.map +0 -12
  148. package/dist/react/index.css +0 -4478
  149. package/dist/react.css.d.ts +0 -1
  150. package/dist/types/embed/shell.d.ts +0 -21
  151. package/dist/types/embed/standalone.d.ts +0 -1
  152. package/dist/types/react/embed/shell.d.ts +0 -10
  153. package/dist/types/react/ui/index.d.ts +0 -129
  154. package/docs/appearance.md +0 -30
  155. package/docs/bootstrap.md +0 -76
  156. package/docs/config.md +0 -21
  157. package/docs/format.md +0 -29
  158. package/docs/react-styles.md +0 -17
  159. package/docs/starter-agent-instructions.md +0 -53
@@ -1,4478 +0,0 @@
1
- /* src/react/ui/PeriodSummary.css */
2
- .altertable-period-summary {
3
- margin: 0;
4
- }
5
-
6
- .altertable-period-summary-visible {
7
- display: inline-flex;
8
- color: var(--at-muted, #687078);
9
- font-variant-numeric: tabular-nums;
10
- white-space: nowrap;
11
- flex-wrap: wrap;
12
- align-items: center;
13
- gap: 4px 7px;
14
- font-size: 12px;
15
- font-weight: 600;
16
- }
17
-
18
- .altertable-period-summary-visible > svg, .altertable-period-summary-vs {
19
- color: var(--at-muted, #687078);
20
- }
21
-
22
- .altertable-period-summary-vs {
23
- font-weight: 450;
24
- }
25
-
26
- .altertable-period-summary-current {
27
- color: var(--at-text, #202124);
28
- font-weight: 650;
29
- }
30
-
31
- /* src/react/ui/SearchInput.css */
32
- .altertable-search-input-wrap {
33
- display: flex;
34
- border: 1px solid var(--at-border, #d9dee2);
35
- border-radius: var(--at-radius-control, 8px);
36
- background: var(--at-surface, #fff);
37
- color: var(--at-muted, #626b73);
38
- align-items: center;
39
- gap: 9px;
40
- width: min(100%, 380px);
41
- min-width: 0;
42
- min-height: 44px;
43
- padding: 0 12px;
44
- }
45
-
46
- .altertable-search-input-wrap:hover {
47
- border-color: var(--at-control-hover-border, #a6acb1);
48
- }
49
-
50
- .altertable-search-input-wrap:focus-within {
51
- outline: var(--at-focus-outline, 1px solid #687078);
52
- outline-offset: var(--at-focus-ring-inset, -1px);
53
- }
54
-
55
- .altertable-search-input-wrap[data-size="compact"] {
56
- width: min(100%, 300px);
57
- min-height: 34px;
58
- padding: 0 10px;
59
- }
60
-
61
- .altertable-search-input-wrap[data-size="compact"] .altertable-search-input {
62
- height: 32px;
63
- font-size: 12px;
64
- }
65
-
66
- @media (max-width: 560px) {
67
- .altertable-search-input-wrap[data-size="compact"] .altertable-search-input {
68
- font-size: 16px;
69
- }
70
- }
71
-
72
- .altertable-search-input {
73
- outline: 0;
74
- color: var(--at-text, #202124);
75
- font: inherit;
76
- background: none;
77
- border: 0;
78
- flex: 1;
79
- width: 100%;
80
- min-width: 0;
81
- height: 42px;
82
- padding: 0;
83
- font-size: 14px;
84
- }
85
-
86
- .altertable-search-input::-webkit-search-cancel-button {
87
- display: none;
88
- }
89
-
90
- .altertable-search-input-wrap > svg {
91
- flex: none;
92
- }
93
-
94
- .altertable-search-input-spinner {
95
- animation: .9s linear infinite altertable-search-input-spin;
96
- }
97
-
98
- @keyframes altertable-search-input-spin {
99
- to {
100
- transform: rotate(360deg);
101
- }
102
- }
103
-
104
- @media (prefers-reduced-motion: reduce) {
105
- .altertable-search-input-spinner {
106
- animation: none;
107
- }
108
- }
109
-
110
- /* src/react/ui/Button.css */
111
- .altertable-button {
112
- display: inline-flex;
113
- border: 1px solid var(--at-border, #e3e6e8);
114
- border-radius: var(--at-radius-control, 7px);
115
- background: var(--at-surface, #fff);
116
- color: var(--at-text, #202124);
117
- font: inherit;
118
- cursor: pointer;
119
- -webkit-tap-highlight-color: transparent;
120
- justify-content: center;
121
- align-items: center;
122
- gap: 8px;
123
- min-height: 38px;
124
- padding: 0 12px;
125
- transition: background-color .12s, border-color .12s, color .12s;
126
- font-size: 13px;
127
- font-weight: 600;
128
- }
129
-
130
- .altertable-button:hover:not(:disabled) {
131
- background: var(--at-subtle, #f6f7f7);
132
- }
133
-
134
- .altertable-button[data-size="icon"] {
135
- flex: none;
136
- width: 36px;
137
- min-width: 36px;
138
- height: 36px;
139
- min-height: 36px;
140
- padding: 0;
141
- }
142
-
143
- .altertable-button[data-variant="outline"] {
144
- box-shadow: none;
145
- }
146
-
147
- .altertable-button[data-variant="elevated"] {
148
- box-shadow: var(--at-shadow-surface, 0 3px 16px #141c280d);
149
- }
150
-
151
- .altertable-button[data-variant="ghost"] {
152
- box-shadow: none;
153
- background: none;
154
- border-color: #0000;
155
- }
156
-
157
- .altertable-button[data-variant="ghost"]:hover:not(:disabled), .altertable-button[data-variant="ghost"][data-open="true"] {
158
- background: var(--at-subtle, #f6f7f7);
159
- }
160
-
161
- .altertable-button[data-focus-visible] {
162
- outline: var(--at-focus-outline, 1px solid #687078);
163
- outline-offset: var(--at-focus-ring-offset, 2px);
164
- }
165
-
166
- .altertable-button:focus-visible {
167
- outline: var(--at-focus-outline, 1px solid #687078);
168
- outline-offset: var(--at-focus-ring-offset, 2px);
169
- }
170
-
171
- .altertable-button:disabled {
172
- opacity: .5;
173
- cursor: default;
174
- }
175
-
176
- @media (prefers-reduced-motion: reduce) {
177
- .altertable-button {
178
- transition: none;
179
- }
180
- }
181
-
182
- .altertable-button[data-size="compact"] {
183
- min-height: 30px;
184
- padding: 0 8px;
185
- font-size: 12px;
186
- }
187
-
188
- .altertable-button[data-size="icon-compact"] {
189
- flex: none;
190
- width: 30px;
191
- min-width: 30px;
192
- height: 30px;
193
- min-height: 30px;
194
- padding: 0;
195
- }
196
-
197
- /* src/react/ui/SearchField.css */
198
- .altertable-search-landmark {
199
- min-width: 0;
200
- }
201
-
202
- .altertable-search {
203
- display: grid;
204
- gap: 7px;
205
- min-width: 0;
206
- }
207
-
208
- .altertable-search-label {
209
- font-size: 13px;
210
- font-weight: 650;
211
- }
212
-
213
- .altertable-search-row {
214
- display: flex;
215
- align-items: center;
216
- gap: 8px;
217
- min-width: 0;
218
- }
219
-
220
- .altertable-search-description, .altertable-search-status {
221
- color: var(--at-muted, #626b73);
222
- margin: 0;
223
- font-size: 12px;
224
- line-height: 1.45;
225
- }
226
-
227
- @media (max-width: 560px) {
228
- .altertable-search .altertable-search-input-wrap {
229
- width: 100%;
230
- }
231
- }
232
-
233
- /* src/react/ui/Skeleton.css */
234
- .altertable-skeleton {
235
- display: block;
236
- border-radius: var(--at-radius-control, 7px);
237
- background: var(--at-subtle, #f6f7f7);
238
- opacity: 0;
239
- animation: .2s .2s forwards altertable-skeleton-in, 1.4s ease-in-out .4s infinite alternate altertable-skeleton-pulse;
240
- }
241
-
242
- @keyframes altertable-skeleton-in {
243
- to {
244
- opacity: 1;
245
- }
246
- }
247
-
248
- @keyframes altertable-skeleton-pulse {
249
- to {
250
- opacity: .5;
251
- }
252
- }
253
-
254
- @media (prefers-reduced-motion: reduce) {
255
- .altertable-skeleton {
256
- animation: 1ms .2s forwards altertable-skeleton-in;
257
- }
258
- }
259
-
260
- /* src/react/ui/Tooltip.css */
261
- .altertable-tooltip-trigger {
262
- display: inline-flex;
263
- align-items: center;
264
- }
265
-
266
- .altertable-tooltip-trigger[data-variant="chart"] {
267
- display: flex;
268
- align-items: flex-end;
269
- width: 100%;
270
- min-width: 0;
271
- height: 100%;
272
- }
273
-
274
- .altertable-tooltip-content {
275
- z-index: 1000;
276
- border: 1px solid var(--at-border, #e3e6e8);
277
- border-radius: var(--at-radius-control, 7px);
278
- background: var(--at-surface, #fff);
279
- color: var(--at-text, #202124);
280
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
281
- font: 500 12px / 1.3 var(--at-font, ui-sans-serif, system-ui, sans-serif);
282
- white-space: normal;
283
- pointer-events: none;
284
- animation: .12s ease-out altertable-tooltip-in;
285
- width: max-content;
286
- max-width: min(240px, 100vw - 24px);
287
- padding: 6px 9px;
288
- }
289
-
290
- .altertable-tooltip-content[data-variant="chart"] {
291
- display: grid;
292
- font-variant-numeric: tabular-nums;
293
- gap: 2px;
294
- padding: 8px 10px;
295
- }
296
-
297
- .altertable-tooltip-content[data-variant="chart"] strong {
298
- font-size: 14px;
299
- font-weight: 650;
300
- line-height: 1.2;
301
- }
302
-
303
- @keyframes altertable-tooltip-in {
304
- from {
305
- opacity: 0;
306
- }
307
- }
308
-
309
- @media (prefers-reduced-motion: reduce) {
310
- .altertable-tooltip-content {
311
- animation: none;
312
- }
313
- }
314
-
315
- /* src/react/ui/RequestHint.css */
316
- .altertable-request-hint {
317
- display: flex;
318
- color: var(--at-muted, #687078);
319
- font: 12px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
320
- align-items: center;
321
- gap: 6px;
322
- min-width: 0;
323
- height: 28px;
324
- }
325
-
326
- .altertable-request-hint > svg, .altertable-request-hint > button {
327
- flex: none;
328
- }
329
-
330
- .altertable-request-hint-message {
331
- overflow: hidden;
332
- text-overflow: ellipsis;
333
- white-space: nowrap;
334
- min-width: 0;
335
- }
336
-
337
- .altertable-request-hint[data-state="error"] > svg {
338
- color: var(--at-danger, #b42318);
339
- }
340
-
341
- .altertable-request-hint-spinner {
342
- animation: .9s linear infinite altertable-request-hint-spin;
343
- }
344
-
345
- @keyframes altertable-request-hint-spin {
346
- to {
347
- transform: rotate(360deg);
348
- }
349
- }
350
-
351
- @media (prefers-reduced-motion: reduce) {
352
- .altertable-request-hint-spinner {
353
- animation: none;
354
- }
355
- }
356
-
357
- .altertable-widget-status {
358
- display: flex;
359
- color: var(--at-muted, #687078);
360
- font: 12px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
361
- flex: none;
362
- justify-content: center;
363
- align-items: center;
364
- width: 78px;
365
- height: 30px;
366
- }
367
-
368
- .altertable-widget-status .altertable-button {
369
- gap: 5px;
370
- }
371
-
372
- .altertable-widget-status .altertable-button svg {
373
- color: var(--at-danger, #b42318);
374
- }
375
-
376
- .altertable-widget-status-announcement {
377
- position: absolute;
378
- overflow: hidden;
379
- clip-path: inset(50%);
380
- white-space: nowrap;
381
- width: 1px;
382
- height: 1px;
383
- }
384
-
385
- .altertable-widget-status-shimmer {
386
- position: relative;
387
- display: inline-block;
388
- overflow: hidden;
389
- white-space: nowrap;
390
- }
391
-
392
- .altertable-widget-status-base {
393
- opacity: .65;
394
- }
395
-
396
- .altertable-widget-status-sweep {
397
- position: absolute;
398
- color: var(--at-text, #202124);
399
- mask-image: linear-gradient(90deg, #0000 10%, #000 45% 55%, #0000 90%);
400
- animation: 1.6s linear infinite altertable-widget-status-sweep;
401
- inset: 0;
402
- }
403
-
404
- .altertable-widget-status-sweep > span {
405
- display: block;
406
- animation: 1.6s linear infinite altertable-widget-status-counter-sweep;
407
- }
408
-
409
- .altertable-widget-status-sweep > span:before {
410
- content: attr(data-text);
411
- }
412
-
413
- @keyframes altertable-widget-status-sweep {
414
- from {
415
- transform: translateX(-100%);
416
- }
417
-
418
- to {
419
- transform: translateX(100%);
420
- }
421
- }
422
-
423
- @keyframes altertable-widget-status-counter-sweep {
424
- from {
425
- transform: translateX(100%);
426
- }
427
-
428
- to {
429
- transform: translateX(-100%);
430
- }
431
- }
432
-
433
- @media (prefers-reduced-motion: reduce) {
434
- .altertable-widget-status-sweep, .altertable-widget-status-sweep > span {
435
- animation: none;
436
- }
437
-
438
- .altertable-widget-status-sweep {
439
- display: none;
440
- }
441
-
442
- .altertable-widget-status-base {
443
- opacity: 1;
444
- }
445
- }
446
-
447
- /* src/react/ui/GradientScroll.css */
448
- .altertable-gradient-scroll {
449
- overflow: auto;
450
- --at-scroll-fade-size: 1.5rem;
451
- min-width: 0;
452
- min-height: 0;
453
- }
454
-
455
- .altertable-gradient-scroll[data-axis="vertical"] {
456
- overflow-x: hidden;
457
- }
458
-
459
- .altertable-gradient-scroll[data-axis="horizontal"] {
460
- overflow-y: hidden;
461
- }
462
-
463
- .altertable-gradient-scroll[data-axis="vertical"][data-fade-start][data-fade-end] {
464
- mask-image: linear-gradient(to bottom, transparent, black var(--at-scroll-fade-size), black calc(100% - var(--at-scroll-fade-size)), transparent);
465
- }
466
-
467
- .altertable-gradient-scroll[data-axis="vertical"][data-fade-start]:not([data-fade-end]) {
468
- mask-image: linear-gradient(to bottom, transparent, black var(--at-scroll-fade-size));
469
- }
470
-
471
- .altertable-gradient-scroll[data-axis="vertical"][data-fade-end]:not([data-fade-start]) {
472
- mask-image: linear-gradient(to bottom, black, black calc(100% - var(--at-scroll-fade-size)), transparent);
473
- }
474
-
475
- .altertable-gradient-scroll[data-axis="horizontal"][data-fade-start][data-fade-end] {
476
- mask-image: linear-gradient(to right, transparent, black var(--at-scroll-fade-size), black calc(100% - var(--at-scroll-fade-size)), transparent);
477
- }
478
-
479
- .altertable-gradient-scroll[data-axis="horizontal"][data-fade-start]:not([data-fade-end]) {
480
- mask-image: linear-gradient(to right, transparent, black var(--at-scroll-fade-size));
481
- }
482
-
483
- .altertable-gradient-scroll[data-axis="horizontal"][data-fade-end]:not([data-fade-start]) {
484
- mask-image: linear-gradient(to right, black, black calc(100% - var(--at-scroll-fade-size)), transparent);
485
- }
486
-
487
- /* src/react/ui/SelectionMark.css */
488
- .altertable-selection-mark {
489
- display: grid;
490
- box-sizing: border-box;
491
- border: 1px solid var(--at-muted, #687078);
492
- border-radius: 4px;
493
- flex: none;
494
- place-items: center;
495
- width: 16px;
496
- height: 16px;
497
- }
498
-
499
- .altertable-selection-mark[data-selected] {
500
- border-color: var(--at-accent, #4779dc);
501
- background: var(--at-accent, #4779dc);
502
- }
503
-
504
- .altertable-selection-mark[data-selected]:after {
505
- content: "";
506
- border: 2px solid #fff;
507
- border-width: 0 2px 2px 0;
508
- width: 4px;
509
- height: 7px;
510
- margin-top: -2px;
511
- transform: rotate(45deg);
512
- }
513
-
514
- /* src/react/ui/SearchMatch.css */
515
- .altertable-search-match mark {
516
- background: color-mix(in srgb, currentColor 16%, transparent);
517
- color: inherit;
518
- box-decoration-break: clone;
519
- border-radius: 2px;
520
- padding: 0 1px;
521
- }
522
-
523
- /* src/react/ui/Combobox.css */
524
- .altertable-combobox-trigger {
525
- box-sizing: border-box;
526
- text-align: left;
527
- max-width: min(100%, 340px, 75vw);
528
- }
529
-
530
- .altertable-combobox-label {
531
- overflow: hidden;
532
- text-overflow: ellipsis;
533
- white-space: nowrap;
534
- color: var(--at-muted, #687078);
535
- flex: 0 auto;
536
- min-width: 0;
537
- font-size: 12px;
538
- font-weight: 500;
539
- }
540
-
541
- .altertable-combobox-value {
542
- overflow: hidden;
543
- text-overflow: ellipsis;
544
- white-space: nowrap;
545
- flex: none;
546
- min-width: 0;
547
- max-width: 55%;
548
- font-size: 13px;
549
- font-weight: 600;
550
- }
551
-
552
- .altertable-combobox-trigger > svg {
553
- color: var(--at-muted, #687078);
554
- flex: none;
555
- margin-left: auto;
556
- }
557
-
558
- .altertable-combobox-popover {
559
- z-index: 150;
560
- min-width: max(var(--trigger-width), 240px);
561
- border: 1px solid var(--at-border, #e3e6e8);
562
- border-radius: var(--at-radius-surface, 12px);
563
- background: var(--at-surface, #fff);
564
- color: var(--at-text, #202124);
565
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
566
- font: 13px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
567
- max-width: min(340px, 100vw - 24px);
568
- padding: 8px;
569
- }
570
-
571
- .altertable-combobox-dialog {
572
- outline: none;
573
- }
574
-
575
- .altertable-combobox-dialog .altertable-search-input-wrap {
576
- box-sizing: border-box;
577
- width: 100%;
578
- }
579
-
580
- .altertable-combobox-status {
581
- position: absolute;
582
- overflow: hidden;
583
- clip-path: inset(50%);
584
- white-space: nowrap;
585
- width: 1px;
586
- height: 1px;
587
- }
588
-
589
- .altertable-combobox-options {
590
- max-height: min(320px, 60dvh);
591
- margin-top: 4px;
592
- }
593
-
594
- .altertable-combobox-popover .react-aria-ListBox {
595
- outline: none;
596
- }
597
-
598
- .altertable-combobox-popover .react-aria-ListBoxItem {
599
- display: flex;
600
- border-radius: var(--at-radius-control, 7px);
601
- outline: none;
602
- cursor: pointer;
603
- align-items: center;
604
- gap: 9px;
605
- padding: 8px 10px;
606
- }
607
-
608
- .altertable-combobox-popover .react-aria-ListBoxItem small {
609
- display: block;
610
- color: var(--at-muted, #687078);
611
- font-size: 11px;
612
- font-weight: 400;
613
- }
614
-
615
- .altertable-combobox-popover .react-aria-ListBoxItem[data-missing]:not(:first-child) {
616
- position: relative;
617
- margin-top: 9px;
618
- }
619
-
620
- .altertable-combobox-popover .react-aria-ListBoxItem[data-missing]:not(:first-child):before {
621
- content: "";
622
- position: absolute;
623
- border-top: 1px solid var(--at-border, #e3e6e8);
624
- pointer-events: none;
625
- top: -5px;
626
- left: 0;
627
- right: 0;
628
- }
629
-
630
- .altertable-combobox-option-content {
631
- min-width: 0;
632
- }
633
-
634
- .altertable-combobox-popover .react-aria-ListBoxItem[data-focused], .altertable-combobox-popover .react-aria-ListBoxItem[data-hovered] {
635
- background: var(--at-subtle, #f6f7f7);
636
- }
637
-
638
- .altertable-combobox-popover .react-aria-ListBoxItem[data-focus-visible] {
639
- outline: var(--at-focus-outline, 1px solid #687078);
640
- outline-offset: var(--at-focus-ring-inset, -1px);
641
- }
642
-
643
- .altertable-combobox-popover .react-aria-ListBoxItem[data-disabled] {
644
- opacity: .45;
645
- cursor: not-allowed;
646
- }
647
-
648
- .altertable-combobox-empty {
649
- color: var(--at-muted, #687078);
650
- padding: 12px 10px;
651
- }
652
-
653
- .altertable-combobox-actions {
654
- border-top: 1px solid var(--at-border, #e3e6e8);
655
- display: flex;
656
- justify-content: flex-start;
657
- margin-top: 4px;
658
- padding-top: 4px;
659
- }
660
-
661
- .altertable-combobox-dialog > .altertable-request-hint {
662
- margin: 4px 10px 0;
663
- }
664
-
665
- .altertable-combobox-skeletons {
666
- display: grid;
667
- gap: 10px;
668
- padding: 10px;
669
- }
670
-
671
- .altertable-combobox-skeletons > span {
672
- height: 24px;
673
- }
674
-
675
- /* src/react/ui/Checkbox.css */
676
- .altertable-checkbox {
677
- position: relative;
678
- display: inline-flex;
679
- border-radius: var(--at-radius-control, 7px);
680
- cursor: pointer;
681
- font: 13px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
682
- color: var(--at-text, #202124);
683
- align-items: flex-start;
684
- gap: 9px;
685
- }
686
-
687
- .altertable-checkbox input {
688
- position: absolute;
689
- cursor: inherit;
690
- opacity: 0;
691
- width: 100%;
692
- height: 100%;
693
- margin: 0;
694
- inset: 0;
695
- }
696
-
697
- .altertable-checkbox:has(input:focus-visible) {
698
- outline: var(--at-focus-outline, 1px solid #687078);
699
- outline-offset: var(--at-focus-ring-offset, 2px);
700
- }
701
-
702
- .altertable-checkbox:has(input:disabled) {
703
- opacity: .5;
704
- cursor: default;
705
- }
706
-
707
- .altertable-checkbox .altertable-selection-mark {
708
- margin-top: 2px;
709
- }
710
-
711
- .altertable-checkbox small {
712
- display: block;
713
- color: var(--at-muted, #687078);
714
- margin-top: 2px;
715
- font-size: 12px;
716
- }
717
-
718
- /* src/react/ui/DateRangePicker.css */
719
- .altertable-date-range {
720
- position: relative;
721
- display: inline-grid;
722
- color: var(--at-text, #202124);
723
- gap: 6px;
724
- font-size: 14px;
725
- }
726
-
727
- .altertable-date-range .react-aria-Label {
728
- color: var(--at-muted, #687078);
729
- font-weight: 550;
730
- }
731
-
732
- .altertable-date-range .react-aria-Group {
733
- display: flex;
734
- border: 1px solid var(--at-border, #e3e6e8);
735
- border-radius: var(--at-radius-control, 7px);
736
- background: var(--at-surface, #fff);
737
- align-items: center;
738
- gap: 5px;
739
- min-height: 36px;
740
- padding: 0 2px 0 10px;
741
- transition: border-color .12s;
742
- }
743
-
744
- .altertable-date-range .react-aria-Group[data-hovered] {
745
- border-color: var(--at-control-hover-border, #a6acb1);
746
- }
747
-
748
- .altertable-variable-bar .altertable-date-range .react-aria-Group {
749
- box-shadow: var(--at-shadow-surface, none);
750
- }
751
-
752
- .altertable-date-range .react-aria-Group[data-focus-within] {
753
- outline: var(--at-focus-outline, 1px solid #687078);
754
- outline-offset: var(--at-focus-ring-inset, -1px);
755
- }
756
-
757
- .altertable-date-range[data-invalid] .react-aria-Group {
758
- border-color: var(--at-danger, #b42318);
759
- }
760
-
761
- .altertable-date-range:has(.altertable-date-range-error) .react-aria-Group {
762
- border-color: var(--at-danger, #b42318);
763
- }
764
-
765
- .altertable-date-range .react-aria-DateInput {
766
- display: flex;
767
- white-space: nowrap;
768
- letter-spacing: -.01em;
769
- min-width: 0;
770
- font-weight: 560;
771
- }
772
-
773
- .altertable-date-range .react-aria-DateSegment {
774
- font-variant-numeric: tabular-nums;
775
- outline: none;
776
- border-radius: 3px;
777
- padding: 3px 1px;
778
- }
779
-
780
- .altertable-date-range .react-aria-DateSegment[data-type="literal"] {
781
- color: var(--at-muted, #687078);
782
- }
783
-
784
- .altertable-date-range .react-aria-DateSegment[data-focused] {
785
- outline: var(--at-focus-outline, 1px solid #687078);
786
- outline-offset: var(--at-focus-ring-inset, -1px);
787
- }
788
-
789
- .altertable-date-range .react-aria-Group > span[aria-hidden] {
790
- color: var(--at-muted, #687078);
791
- }
792
-
793
- .altertable-date-range-comparison {
794
- background: var(--at-subtle, #f6f7f7);
795
- color: var(--at-muted, #687078);
796
- white-space: nowrap;
797
- border-radius: 4px;
798
- flex: none;
799
- padding: 2px 5px;
800
- font-size: 11px;
801
- font-weight: 600;
802
- }
803
-
804
- .altertable-date-range .react-aria-Group .react-aria-Button {
805
- display: grid;
806
- border-radius: var(--at-radius-control, 7px);
807
- color: var(--at-muted, #687078);
808
- cursor: pointer;
809
- outline: none;
810
- background: none;
811
- border: 0;
812
- place-items: center;
813
- width: 32px;
814
- height: 32px;
815
- margin-left: auto;
816
- transition: background-color .12s, color .12s;
817
- }
818
-
819
- .altertable-date-range .react-aria-Group .react-aria-Button[data-hovered], .altertable-date-range .react-aria-Group .react-aria-Button[data-pressed] {
820
- background: var(--at-subtle, #f6f7f7);
821
- color: var(--at-text, #202124);
822
- }
823
-
824
- .altertable-date-range .react-aria-Group .react-aria-Button[data-focus-visible] {
825
- outline: var(--at-focus-outline, 1px solid #687078);
826
- outline-offset: var(--at-focus-ring-offset, 2px);
827
- }
828
-
829
- .altertable-date-range .altertable-date-range-reset {
830
- display: grid;
831
- border-radius: var(--at-radius-control, 7px);
832
- color: var(--at-muted, #687078);
833
- cursor: pointer;
834
- background: none;
835
- border: 0;
836
- flex: none;
837
- place-items: center;
838
- width: 28px;
839
- height: 28px;
840
- margin-left: auto;
841
- padding: 0;
842
- }
843
-
844
- .altertable-date-range .altertable-date-range-reset:hover {
845
- background: var(--at-subtle, #f6f7f7);
846
- color: var(--at-text, #202124);
847
- }
848
-
849
- .altertable-date-range .altertable-date-range-reset:focus-visible {
850
- outline: var(--at-focus-outline, 1px solid #687078);
851
- outline-offset: var(--at-focus-ring-offset, 2px);
852
- }
853
-
854
- .altertable-date-range .altertable-date-range-reset + .react-aria-Button {
855
- margin-left: 0;
856
- }
857
-
858
- .altertable-date-range-error {
859
- position: absolute;
860
- z-index: 1;
861
- color: var(--at-danger, #b42318);
862
- width: max-content;
863
- max-width: 100%;
864
- font-size: 12px;
865
- top: calc(100% + 6px);
866
- right: 0;
867
- }
868
-
869
- .altertable-date-range-popover {
870
- z-index: 100;
871
- border: 1px solid var(--at-border, #e3e6e8);
872
- border-radius: var(--at-radius-surface, 12px);
873
- background: var(--at-surface, #fff);
874
- color: var(--at-text, #202124);
875
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
876
- font: 13px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
877
- padding: 12px;
878
- }
879
-
880
- .altertable-date-range-popover[data-entering] {
881
- animation: .14s cubic-bezier(.2,.7,.2,1) altertable-calendar-in;
882
- }
883
-
884
- @keyframes altertable-calendar-in {
885
- from {
886
- opacity: 0;
887
- translate: 0 -4px;
888
- }
889
- }
890
-
891
- .altertable-date-range-popover .react-aria-Dialog {
892
- outline: none;
893
- }
894
-
895
- .altertable-date-range-content {
896
- display: grid;
897
- grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
898
- gap: 14px;
899
- }
900
-
901
- .altertable-date-range-presets {
902
- display: flex;
903
- overflow-y: auto;
904
- overscroll-behavior: contain;
905
- border: 0;
906
- border-right: 1px solid var(--at-border, #e3e6e8);
907
- flex-direction: column;
908
- min-width: 0;
909
- max-height: min(380px, 62dvh);
910
- margin: 0;
911
- padding: 0 12px 0 0;
912
- }
913
-
914
- .altertable-date-range-preset-list {
915
- display: flex;
916
- flex-direction: column;
917
- gap: 2px;
918
- min-width: 0;
919
- }
920
-
921
- .altertable-date-range-custom {
922
- min-width: 0;
923
- }
924
-
925
- .altertable-date-range-heading {
926
- display: block;
927
- color: var(--at-muted, #687078);
928
- letter-spacing: .04em;
929
- text-transform: uppercase;
930
- padding: 5px 8px 9px;
931
- font-size: 11px;
932
- font-weight: 650;
933
- }
934
-
935
- .altertable-date-range-popover .altertable-date-range-preset {
936
- display: flex;
937
- border-radius: var(--at-radius-control, 7px);
938
- color: var(--at-text, #202124);
939
- text-align: left;
940
- line-height: 1.25;
941
- font: inherit;
942
- cursor: pointer;
943
- background: none;
944
- border: 0;
945
- justify-content: flex-start;
946
- width: 100%;
947
- height: auto;
948
- min-height: 34px;
949
- padding: 7px 9px;
950
- }
951
-
952
- .altertable-date-range-popover .altertable-date-range-preset[data-hovered] {
953
- background: var(--at-subtle, #f6f7f7);
954
- }
955
-
956
- .altertable-date-range-popover .altertable-date-range-preset[data-focus-visible] {
957
- outline: var(--at-focus-outline, 1px solid #687078);
958
- outline-offset: var(--at-focus-ring-inset, -1px);
959
- }
960
-
961
- .altertable-date-range-popover .altertable-date-range-preset[aria-current="true"] {
962
- background: var(--at-accent-subtle, #eaf0fb);
963
- color: var(--at-accent, #4779dc);
964
- font-weight: 650;
965
- }
966
-
967
- .altertable-date-range-footer {
968
- display: flex;
969
- border-radius: var(--at-radius-control, 7px);
970
- background: var(--at-subtle, #f6f7f7);
971
- color: var(--at-muted, #687078);
972
- font-variant-numeric: tabular-nums;
973
- flex-wrap: wrap;
974
- justify-content: space-between;
975
- align-items: end;
976
- gap: 12px;
977
- margin-top: 12px;
978
- padding: 10px 12px;
979
- font-size: 11px;
980
- }
981
-
982
- .altertable-date-range-footer > div {
983
- display: grid;
984
- gap: 2px;
985
- }
986
-
987
- .altertable-date-range-footer-label {
988
- font-weight: 600;
989
- }
990
-
991
- .altertable-date-range-footer strong {
992
- color: var(--at-text, #202124);
993
- font-size: 13px;
994
- font-weight: 650;
995
- }
996
-
997
- .altertable-date-range-footer-meta {
998
- white-space: nowrap;
999
- }
1000
-
1001
- .altertable-date-range-compare {
1002
- display: flex;
1003
- border-top: 1px solid var(--at-border, #e3e6e8);
1004
- cursor: pointer;
1005
- align-items: flex-start;
1006
- gap: 9px;
1007
- margin-top: 10px;
1008
- padding: 10px 4px 2px;
1009
- }
1010
-
1011
- .altertable-date-range-popover .react-aria-RangeCalendar {
1012
- width: max-content;
1013
- max-width: calc(100vw - 32px);
1014
- }
1015
-
1016
- .altertable-date-range-popover .react-aria-RangeCalendar header {
1017
- display: flex;
1018
- align-items: center;
1019
- gap: 4px;
1020
- margin-bottom: 8px;
1021
- }
1022
-
1023
- .altertable-date-range-popover .react-aria-Button:not(.altertable-date-range-preset) {
1024
- display: grid;
1025
- border-radius: var(--at-radius-control, 7px);
1026
- color: inherit;
1027
- font: inherit;
1028
- cursor: pointer;
1029
- outline: none;
1030
- background: none;
1031
- border: 0;
1032
- place-items: center;
1033
- width: 32px;
1034
- height: 32px;
1035
- padding: 0;
1036
- }
1037
-
1038
- .altertable-date-range-popover .react-aria-Button:not(.altertable-date-range-preset)[data-hovered] {
1039
- background: var(--at-subtle, #f6f7f7);
1040
- }
1041
-
1042
- .altertable-date-range-popover .react-aria-Button:not(.altertable-date-range-preset)[data-focus-visible] {
1043
- outline: var(--at-focus-outline, 1px solid #687078);
1044
- outline-offset: var(--at-focus-ring-offset, 2px);
1045
- }
1046
-
1047
- .altertable-date-range-popover .react-aria-Button:not(.altertable-date-range-preset)[data-disabled] {
1048
- opacity: .35;
1049
- cursor: default;
1050
- }
1051
-
1052
- .altertable-date-range-popover .altertable-calendar-select:first-of-type {
1053
- flex: 1;
1054
- }
1055
-
1056
- .altertable-date-range-popover .altertable-calendar-select .react-aria-Button {
1057
- display: inline-flex;
1058
- justify-content: space-between;
1059
- align-items: center;
1060
- gap: 6px;
1061
- width: 100%;
1062
- min-width: 72px;
1063
- padding: 0 8px;
1064
- font-weight: 650;
1065
- }
1066
-
1067
- .altertable-date-range-popover .altertable-calendar-select svg {
1068
- color: var(--at-muted, #687078);
1069
- }
1070
-
1071
- .altertable-date-range-popover .react-aria-CalendarGrid {
1072
- border-collapse: separate;
1073
- border-spacing: 0 2px;
1074
- }
1075
-
1076
- .altertable-date-range-popover .react-aria-CalendarGrid th, .altertable-date-range-popover .react-aria-CalendarGrid td {
1077
- text-align: center;
1078
- width: 36px;
1079
- padding: 0;
1080
- }
1081
-
1082
- .altertable-date-range-popover .react-aria-CalendarHeaderCell {
1083
- color: var(--at-muted, #687078);
1084
- height: 28px;
1085
- font-size: 11px;
1086
- font-weight: 550;
1087
- }
1088
-
1089
- .altertable-date-range-popover .react-aria-CalendarCell {
1090
- display: flex;
1091
- border-radius: var(--at-radius-control, 7px);
1092
- font-variant-numeric: tabular-nums;
1093
- outline: none;
1094
- cursor: pointer;
1095
- justify-content: center;
1096
- align-items: center;
1097
- width: 36px;
1098
- height: 34px;
1099
- line-height: 1;
1100
- }
1101
-
1102
- .altertable-date-range-popover .react-aria-CalendarCell[data-outside-month] {
1103
- visibility: hidden;
1104
- }
1105
-
1106
- .altertable-date-range-popover .react-aria-CalendarCell[data-hovered]:not([data-selected]) {
1107
- background: var(--at-subtle, #f6f7f7);
1108
- }
1109
-
1110
- .altertable-date-range-popover .react-aria-CalendarCell[data-selected] {
1111
- background: var(--at-accent-subtle, #eaf0fb);
1112
- border-radius: 0;
1113
- }
1114
-
1115
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1116
- border-top-left-radius: var(--at-radius-control, 7px);
1117
- border-bottom-left-radius: var(--at-radius-control, 7px);
1118
- }
1119
-
1120
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1121
- border-top-left-radius: var(--at-radius-control, 7px);
1122
- border-bottom-left-radius: var(--at-radius-control, 7px);
1123
- }
1124
-
1125
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1126
- border-top-left-radius: var(--at-radius-control, 7px);
1127
- border-bottom-left-radius: var(--at-radius-control, 7px);
1128
- }
1129
-
1130
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1131
- border-top-right-radius: var(--at-radius-control, 7px);
1132
- border-bottom-right-radius: var(--at-radius-control, 7px);
1133
- }
1134
-
1135
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1136
- border-top-right-radius: var(--at-radius-control, 7px);
1137
- border-bottom-right-radius: var(--at-radius-control, 7px);
1138
- }
1139
-
1140
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1141
- border-top-right-radius: var(--at-radius-control, 7px);
1142
- border-bottom-right-radius: var(--at-radius-control, 7px);
1143
- }
1144
-
1145
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1146
- border-top-right-radius: var(--at-radius-control, 7px);
1147
- border-bottom-right-radius: var(--at-radius-control, 7px);
1148
- }
1149
-
1150
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1151
- border-top-right-radius: var(--at-radius-control, 7px);
1152
- border-bottom-right-radius: var(--at-radius-control, 7px);
1153
- }
1154
-
1155
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1156
- border-top-right-radius: var(--at-radius-control, 7px);
1157
- border-bottom-right-radius: var(--at-radius-control, 7px);
1158
- }
1159
-
1160
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1161
- border-top-left-radius: var(--at-radius-control, 7px);
1162
- border-bottom-left-radius: var(--at-radius-control, 7px);
1163
- }
1164
-
1165
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1166
- border-top-left-radius: var(--at-radius-control, 7px);
1167
- border-bottom-left-radius: var(--at-radius-control, 7px);
1168
- }
1169
-
1170
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1171
- border-top-left-radius: var(--at-radius-control, 7px);
1172
- border-bottom-left-radius: var(--at-radius-control, 7px);
1173
- }
1174
-
1175
- .altertable-date-range-popover .react-aria-CalendarCell[data-selection-start], .altertable-date-range-popover .react-aria-CalendarCell[data-selection-end] {
1176
- background: var(--at-accent, #4779dc);
1177
- color: var(--at-on-accent, #fff);
1178
- font-weight: 650;
1179
- }
1180
-
1181
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1182
- border-top-left-radius: var(--at-radius-control, 7px);
1183
- border-bottom-left-radius: var(--at-radius-control, 7px);
1184
- }
1185
-
1186
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1187
- border-top-left-radius: var(--at-radius-control, 7px);
1188
- border-bottom-left-radius: var(--at-radius-control, 7px);
1189
- }
1190
-
1191
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1192
- border-top-left-radius: var(--at-radius-control, 7px);
1193
- border-bottom-left-radius: var(--at-radius-control, 7px);
1194
- }
1195
-
1196
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1197
- border-top-right-radius: var(--at-radius-control, 7px);
1198
- border-bottom-right-radius: var(--at-radius-control, 7px);
1199
- }
1200
-
1201
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1202
- border-top-right-radius: var(--at-radius-control, 7px);
1203
- border-bottom-right-radius: var(--at-radius-control, 7px);
1204
- }
1205
-
1206
- .altertable-date-range-popover td:first-child .react-aria-CalendarCell[data-selected]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1207
- border-top-right-radius: var(--at-radius-control, 7px);
1208
- border-bottom-right-radius: var(--at-radius-control, 7px);
1209
- }
1210
-
1211
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1212
- border-top-right-radius: var(--at-radius-control, 7px);
1213
- border-bottom-right-radius: var(--at-radius-control, 7px);
1214
- }
1215
-
1216
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1217
- border-top-right-radius: var(--at-radius-control, 7px);
1218
- border-bottom-right-radius: var(--at-radius-control, 7px);
1219
- }
1220
-
1221
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
1222
- border-top-right-radius: var(--at-radius-control, 7px);
1223
- border-bottom-right-radius: var(--at-radius-control, 7px);
1224
- }
1225
-
1226
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1227
- border-top-left-radius: var(--at-radius-control, 7px);
1228
- border-bottom-left-radius: var(--at-radius-control, 7px);
1229
- }
1230
-
1231
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1232
- border-top-left-radius: var(--at-radius-control, 7px);
1233
- border-bottom-left-radius: var(--at-radius-control, 7px);
1234
- }
1235
-
1236
- .altertable-date-range-popover td:last-child .react-aria-CalendarCell[data-selected]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1237
- border-top-left-radius: var(--at-radius-control, 7px);
1238
- border-bottom-left-radius: var(--at-radius-control, 7px);
1239
- }
1240
-
1241
- .altertable-date-range-popover .react-aria-CalendarCell[data-focus-visible] {
1242
- outline: var(--at-focus-outline, 1px solid #687078);
1243
- outline-offset: var(--at-focus-ring-inset, -1px);
1244
- }
1245
-
1246
- .altertable-date-range-popover .react-aria-CalendarCell[data-disabled], .altertable-date-range-popover .react-aria-CalendarCell[data-unavailable] {
1247
- color: var(--at-muted, #687078);
1248
- opacity: .4;
1249
- cursor: default;
1250
- }
1251
-
1252
- .altertable-date-range-popover .react-aria-CalendarCell[data-unavailable] {
1253
- text-decoration: line-through;
1254
- }
1255
-
1256
- .altertable-calendar-select-popover {
1257
- z-index: 150;
1258
- min-width: var(--trigger-width);
1259
- border: 1px solid var(--at-border, #e3e6e8);
1260
- border-radius: var(--at-radius-control, 7px);
1261
- background: var(--at-surface, #fff);
1262
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
1263
- color: var(--at-text, #202124);
1264
- font: 13px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
1265
- padding: 4px;
1266
- }
1267
-
1268
- .altertable-calendar-select-popover .react-aria-ListBox {
1269
- overflow: auto;
1270
- outline: none;
1271
- max-height: min(260px, 45dvh);
1272
- }
1273
-
1274
- .altertable-calendar-select-popover .react-aria-ListBoxItem {
1275
- border-radius: var(--at-radius-control, 7px);
1276
- outline: none;
1277
- cursor: pointer;
1278
- padding: 7px 10px;
1279
- }
1280
-
1281
- .altertable-calendar-select-popover .react-aria-ListBoxItem[data-selected] {
1282
- font-weight: 650;
1283
- }
1284
-
1285
- .altertable-calendar-select-popover .react-aria-ListBoxItem[data-focused], .altertable-calendar-select-popover .react-aria-ListBoxItem[data-hovered] {
1286
- background: var(--at-subtle, #f6f7f7);
1287
- }
1288
-
1289
- @media (max-width: 620px) {
1290
- .altertable-date-range-popover {
1291
- box-sizing: border-box;
1292
- overflow-y: auto;
1293
- overscroll-behavior: contain;
1294
- width: min(420px, 100vw - 24px);
1295
- max-height: calc(100dvh - 24px);
1296
- }
1297
-
1298
- .altertable-date-range-content {
1299
- grid-template-columns: minmax(0, 1fr);
1300
- gap: 10px;
1301
- }
1302
-
1303
- .altertable-date-range-presets {
1304
- overflow: visible;
1305
- border-right: 0;
1306
- border-bottom: 1px solid var(--at-border, #e3e6e8);
1307
- max-height: none;
1308
- padding: 0 0 10px;
1309
- }
1310
-
1311
- .altertable-date-range-preset-list {
1312
- overflow-x: auto;
1313
- overscroll-behavior-inline: contain;
1314
- scroll-snap-type: x proximity;
1315
- flex-direction: row;
1316
- gap: 6px;
1317
- max-width: 100%;
1318
- padding-bottom: 2px;
1319
- }
1320
-
1321
- .altertable-date-range-popover .altertable-date-range-preset {
1322
- border: 1px solid var(--at-border, #e3e6e8);
1323
- scroll-snap-align: start;
1324
- white-space: nowrap;
1325
- flex: none;
1326
- width: auto;
1327
- min-height: 36px;
1328
- }
1329
-
1330
- .altertable-date-range-heading {
1331
- padding-bottom: 4px;
1332
- }
1333
-
1334
- .altertable-date-range-popover .react-aria-RangeCalendar, .altertable-date-range-popover .react-aria-CalendarGrid {
1335
- width: 100%;
1336
- max-width: none;
1337
- }
1338
-
1339
- .altertable-date-range-popover .react-aria-RangeCalendar header {
1340
- display: grid;
1341
- grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 32px;
1342
- gap: 6px;
1343
- }
1344
-
1345
- .altertable-date-range-popover .react-aria-CalendarGrid {
1346
- table-layout: fixed;
1347
- }
1348
-
1349
- .altertable-date-range-popover .react-aria-CalendarGrid th, .altertable-date-range-popover .react-aria-CalendarGrid td {
1350
- width: 14.2857%;
1351
- }
1352
-
1353
- .altertable-date-range-popover .react-aria-CalendarCell {
1354
- aspect-ratio: 1;
1355
- width: 100%;
1356
- height: auto;
1357
- min-height: 44px;
1358
- }
1359
- }
1360
-
1361
- @media (prefers-reduced-motion: reduce) {
1362
- .altertable-date-range .react-aria-Group, .altertable-date-range .react-aria-Group .react-aria-Button {
1363
- transition: none;
1364
- }
1365
-
1366
- .altertable-date-range-popover[data-entering] {
1367
- animation: none;
1368
- }
1369
- }
1370
-
1371
- /* src/react/ui/Focus.css */
1372
- :root {
1373
- --at-focus-outline: 1px solid var(--at-focus-color, #687078);
1374
- --at-focus-ring-offset: 2px;
1375
- --at-focus-ring-inset: -1px;
1376
- }
1377
-
1378
- [data-at-focus="ring"]:-webkit-any(:focus-visible, [data-focus-visible]) {
1379
- outline: var(--at-focus-outline);
1380
- outline-offset: var(--at-focus-ring-offset);
1381
- }
1382
-
1383
- [data-at-focus="ring"]:-moz-any(:focus-visible, [data-focus-visible]) {
1384
- outline: var(--at-focus-outline);
1385
- outline-offset: var(--at-focus-ring-offset);
1386
- }
1387
-
1388
- [data-at-focus="ring"]:is(:focus-visible, [data-focus-visible]) {
1389
- outline: var(--at-focus-outline);
1390
- outline-offset: var(--at-focus-ring-offset);
1391
- }
1392
-
1393
- [data-at-focus="inset"]:-webkit-any(:focus-visible, [data-focus-visible]) {
1394
- outline: var(--at-focus-outline);
1395
- outline-offset: var(--at-focus-ring-offset);
1396
- }
1397
-
1398
- [data-at-focus="inset"]:-moz-any(:focus-visible, [data-focus-visible]) {
1399
- outline: var(--at-focus-outline);
1400
- outline-offset: var(--at-focus-ring-offset);
1401
- }
1402
-
1403
- [data-at-focus="inset"]:is(:focus-visible, [data-focus-visible]) {
1404
- outline: var(--at-focus-outline);
1405
- outline-offset: var(--at-focus-ring-offset);
1406
- }
1407
-
1408
- [data-at-focus="inset"]:-webkit-any(:focus-visible, [data-focus-visible]) {
1409
- outline-offset: var(--at-focus-ring-inset);
1410
- }
1411
-
1412
- [data-at-focus="inset"]:-moz-any(:focus-visible, [data-focus-visible]) {
1413
- outline-offset: var(--at-focus-ring-inset);
1414
- }
1415
-
1416
- [data-at-focus="inset"]:is(:focus-visible, [data-focus-visible]) {
1417
- outline-offset: var(--at-focus-ring-inset);
1418
- }
1419
-
1420
- [data-at-focus="group"]:-webkit-any(:focus-within, [data-focus-within], [data-focus-visible]) {
1421
- outline: var(--at-focus-outline, 1px solid #687078);
1422
- outline-offset: var(--at-focus-ring-inset, -1px);
1423
- }
1424
-
1425
- [data-at-focus="group"]:-moz-any(:focus-within, [data-focus-within], [data-focus-visible]) {
1426
- outline: var(--at-focus-outline, 1px solid #687078);
1427
- outline-offset: var(--at-focus-ring-inset, -1px);
1428
- }
1429
-
1430
- [data-at-focus="group"]:is(:focus-within, [data-focus-within], [data-focus-visible]) {
1431
- outline: var(--at-focus-outline, 1px solid #687078);
1432
- outline-offset: var(--at-focus-ring-inset, -1px);
1433
- }
1434
-
1435
- [data-at-focus="group"] input:focus-visible {
1436
- outline: none;
1437
- }
1438
-
1439
- @media (forced-colors: active) {
1440
- :root {
1441
- --at-focus-color: Highlight !important;
1442
- }
1443
- }
1444
-
1445
- /* src/react/ui/EmptyState.css */
1446
- .altertable-empty-state {
1447
- display: flex;
1448
- color: var(--at-muted, #687078);
1449
- text-align: center;
1450
- flex-direction: column;
1451
- justify-content: center;
1452
- align-items: center;
1453
- gap: 5px;
1454
- min-height: 176px;
1455
- padding: 24px;
1456
- }
1457
-
1458
- .altertable-empty-state strong {
1459
- color: var(--at-text, #202124);
1460
- font-size: 13px;
1461
- font-weight: 600;
1462
- }
1463
-
1464
- .altertable-empty-state p {
1465
- white-space: normal;
1466
- max-width: 40ch;
1467
- margin: 0;
1468
- font-size: 12px;
1469
- line-height: 1.5;
1470
- }
1471
-
1472
- .altertable-empty-state[data-variant="table"] {
1473
- min-height: 112px;
1474
- padding: 18px;
1475
- }
1476
-
1477
- /* src/react/ui/Kbd.css */
1478
- .altertable-kbd {
1479
- display: inline-flex;
1480
- border: 1px solid var(--at-border, #e3e6e8);
1481
- background: var(--at-subtle, #f6f7f7);
1482
- color: var(--at-muted, #687078);
1483
- font: 600 11px / 1.2 var(--at-font, ui-sans-serif, system-ui, sans-serif);
1484
- font-variant-numeric: tabular-nums;
1485
- white-space: nowrap;
1486
- border-radius: 5px;
1487
- justify-content: center;
1488
- align-items: center;
1489
- min-width: 1.6em;
1490
- padding: 2px 5px;
1491
- }
1492
-
1493
- /* src/react/ui/QueryList.css */
1494
- .altertable-query-list {
1495
- display: grid;
1496
- gap: 20px;
1497
- min-width: 0;
1498
- }
1499
-
1500
- .altertable-query-list summary {
1501
- display: inline-flex;
1502
- color: var(--at-muted, #687078);
1503
- list-style: none;
1504
- cursor: pointer;
1505
- border-radius: 4px;
1506
- align-items: center;
1507
- gap: 6px;
1508
- width: -moz-fit-content;
1509
- width: fit-content;
1510
- transition: color .12s;
1511
- font-size: 12px;
1512
- font-weight: 600;
1513
- }
1514
-
1515
- .altertable-query-list summary::-webkit-details-marker {
1516
- display: none;
1517
- }
1518
-
1519
- .altertable-query-list summary:before {
1520
- content: "";
1521
- border-block-start: 4px solid #0000;
1522
- border-block-end: 4px solid #0000;
1523
- border-inline-start: 5px solid;
1524
- width: 0;
1525
- height: 0;
1526
- transition: rotate .12s;
1527
- }
1528
-
1529
- .altertable-query-list[open] summary:before {
1530
- rotate: 90deg;
1531
- }
1532
-
1533
- .altertable-query-list summary:hover {
1534
- color: var(--at-text, #202124);
1535
- }
1536
-
1537
- .altertable-query-list summary:focus-visible {
1538
- outline: var(--at-focus-outline, 1px solid #687078);
1539
- outline-offset: var(--at-focus-ring-offset, 2px);
1540
- }
1541
-
1542
- .altertable-query-list figure {
1543
- display: grid;
1544
- overflow: hidden;
1545
- border: 1px solid var(--at-border, #e3e6e8);
1546
- background: var(--at-surface, #fff);
1547
- border-radius: 10px;
1548
- gap: 0;
1549
- min-width: 0;
1550
- margin: 0;
1551
- }
1552
-
1553
- .altertable-query-list figcaption {
1554
- display: flex;
1555
- border-bottom: 1px solid var(--at-border, #e3e6e8);
1556
- color: var(--at-text, #202124);
1557
- font: 600 12px / 1.4 var(--at-font, system-ui, sans-serif);
1558
- background: none;
1559
- justify-content: space-between;
1560
- align-items: center;
1561
- gap: 12px;
1562
- min-height: 36px;
1563
- padding: 3px 6px 3px 14px;
1564
- }
1565
-
1566
- .altertable-query-filename {
1567
- display: inline-flex;
1568
- overflow-wrap: anywhere;
1569
- align-items: center;
1570
- gap: 7px;
1571
- min-width: 0;
1572
- }
1573
-
1574
- .altertable-query-actions {
1575
- display: inline-flex;
1576
- flex: none;
1577
- align-items: center;
1578
- gap: 2px;
1579
- }
1580
-
1581
- .altertable-query-action {
1582
- color: var(--at-muted, #687078);
1583
- background: none;
1584
- border: 0;
1585
- width: 28px;
1586
- min-width: 28px;
1587
- min-height: 28px;
1588
- padding: 0;
1589
- }
1590
-
1591
- .altertable-query-action:hover:not(:disabled) {
1592
- color: var(--at-text, #202124);
1593
- background: var(--at-subtle, #f6f7f7);
1594
- }
1595
-
1596
- .altertable-query-action:focus-visible {
1597
- outline: var(--at-focus-outline, 1px solid #687078);
1598
- outline-offset: var(--at-focus-ring-offset, 2px);
1599
- }
1600
-
1601
- .altertable-query-list pre {
1602
- background: var(--at-code-surface, #f4f6f9);
1603
- color: var(--at-code-text, #273242);
1604
- font: 12px / 1.6 var(--at-mono-font, ui-monospace, SFMono-Regular, Consolas, monospace);
1605
- white-space: pre-wrap;
1606
- overflow-wrap: anywhere;
1607
- tab-size: 2;
1608
- border: 0;
1609
- border-radius: 0;
1610
- margin: 0;
1611
- padding: 14px 16px 18px;
1612
- }
1613
-
1614
- .altertable-sql-keyword {
1615
- color: var(--at-accent, #305caf);
1616
- font-weight: 650;
1617
- }
1618
-
1619
- .altertable-query-unavailable {
1620
- color: var(--at-muted, #687078);
1621
- margin: 0;
1622
- font-size: 13px;
1623
- }
1624
-
1625
- .altertable-query-notebook {
1626
- gap: 16px;
1627
- }
1628
-
1629
- .altertable-query-notebook-header {
1630
- display: flex;
1631
- flex-wrap: wrap;
1632
- justify-content: space-between;
1633
- align-items: center;
1634
- gap: 8px;
1635
- padding: 0 0 4px;
1636
- }
1637
-
1638
- .altertable-query-notebook-header > span {
1639
- color: var(--at-muted, #687078);
1640
- font-size: 13px;
1641
- font-weight: 450;
1642
- }
1643
-
1644
- .altertable-query-notebook-header small {
1645
- color: var(--at-muted, #687078);
1646
- margin-inline-start: 8px;
1647
- font-size: 11px;
1648
- font-weight: 500;
1649
- }
1650
-
1651
- .altertable-query-notebook-header .altertable-button {
1652
- display: inline-flex;
1653
- align-items: center;
1654
- gap: 6px;
1655
- min-height: 30px;
1656
- font-size: 12px;
1657
- }
1658
-
1659
- .altertable-query-notebook figure {
1660
- border-radius: 10px;
1661
- }
1662
-
1663
- .altertable-query-notebook-error {
1664
- color: var(--at-danger, #b42318);
1665
- padding: 8px 12px;
1666
- font-size: 12px;
1667
- }
1668
-
1669
- @media (hover: hover) and (pointer: fine) {
1670
- .altertable-query-actions .altertable-query-action {
1671
- opacity: 0;
1672
- pointer-events: none;
1673
- transition: opacity .12s;
1674
- }
1675
-
1676
- .altertable-query-list figure:hover .altertable-query-action, .altertable-query-list figure:focus-within .altertable-query-action {
1677
- opacity: 1;
1678
- pointer-events: auto;
1679
- }
1680
-
1681
- .altertable-query-actions:has(output) .altertable-query-action {
1682
- opacity: 1;
1683
- pointer-events: auto;
1684
- }
1685
- }
1686
-
1687
- @media (prefers-reduced-motion: reduce) {
1688
- .altertable-query-list summary, .altertable-query-list summary:before, .altertable-query-actions .altertable-query-action {
1689
- transition: none;
1690
- }
1691
- }
1692
-
1693
- /* src/react/ui/Sheet.css */
1694
- :root:has(.altertable-sheet:modal) {
1695
- overflow: hidden;
1696
- }
1697
-
1698
- .altertable-sheet:not([open]) {
1699
- display: none;
1700
- }
1701
-
1702
- .altertable-sheet {
1703
- position: fixed;
1704
- overflow: hidden;
1705
- border: 0;
1706
- border-left: 1px solid var(--at-border, #e3e6e8);
1707
- background: var(--at-surface, #fff);
1708
- color: var(--at-text, #202124);
1709
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
1710
- font: 14px / 1.55 var(--at-font, ui-sans-serif, system-ui, sans-serif);
1711
- opacity: 0;
1712
- border-radius: 0;
1713
- width: min(640px, 100vw);
1714
- max-width: none;
1715
- height: 100dvh;
1716
- max-height: none;
1717
- margin: 0;
1718
- padding: 0;
1719
- transition: translate .26s cubic-bezier(.22,1,.36,1), opacity .22s;
1720
- inset: 0 0 0 auto;
1721
- translate: 100%;
1722
- }
1723
-
1724
- .altertable-sheet[data-wide] {
1725
- width: min(960px, 100vw);
1726
- }
1727
-
1728
- .altertable-sheet[open] {
1729
- opacity: 1;
1730
- translate: 0;
1731
- }
1732
-
1733
- @starting-style {
1734
- .altertable-sheet[open] {
1735
- opacity: 0;
1736
- translate: 100%;
1737
- }
1738
- }
1739
-
1740
- .altertable-sheet[open][data-closing] {
1741
- opacity: 0;
1742
- transition-timing-function: ease-in;
1743
- translate: 100%;
1744
- }
1745
-
1746
- .altertable-sheet::backdrop {
1747
- background: var(--at-backdrop, #0f171e38);
1748
- opacity: 0;
1749
- transition: opacity .22s;
1750
- }
1751
-
1752
- .altertable-sheet[open]::backdrop {
1753
- opacity: 1;
1754
- }
1755
-
1756
- .altertable-sheet[open][data-closing]::backdrop {
1757
- opacity: 0;
1758
- }
1759
-
1760
- @starting-style {
1761
- .altertable-sheet[open]::backdrop {
1762
- opacity: 0;
1763
- }
1764
- }
1765
-
1766
- .altertable-sheet-shell {
1767
- display: grid;
1768
- grid-template-rows: auto minmax(0, 1fr) auto;
1769
- height: 100%;
1770
- }
1771
-
1772
- .altertable-sheet-header {
1773
- display: flex;
1774
- border-bottom: 1px solid var(--at-border, #e3e6e8);
1775
- justify-content: space-between;
1776
- align-items: flex-start;
1777
- gap: 16px;
1778
- padding: 24px 28px 20px;
1779
- }
1780
-
1781
- .altertable-sheet-header h2 {
1782
- letter-spacing: -.02em;
1783
- overflow-wrap: anywhere;
1784
- margin: 0;
1785
- font-size: 18px;
1786
- font-weight: 650;
1787
- line-height: 1.25;
1788
- }
1789
-
1790
- .altertable-sheet-header p {
1791
- color: var(--at-muted, #687078);
1792
- margin: 4px 0 0;
1793
- font-size: 13px;
1794
- line-height: 1.45;
1795
- }
1796
-
1797
- .altertable-sheet-actions {
1798
- display: flex;
1799
- align-items: center;
1800
- gap: 4px;
1801
- margin: -4px -8px 0 0;
1802
- }
1803
-
1804
- .altertable-sheet-close {
1805
- color: var(--at-muted, #687078);
1806
- }
1807
-
1808
- .altertable-sheet-body {
1809
- overflow-y: auto;
1810
- overscroll-behavior: contain;
1811
- min-height: 0;
1812
- padding: 24px 28px 40px;
1813
- }
1814
-
1815
- .altertable-sheet-footer {
1816
- border-top: 1px solid var(--at-border, #e3e6e8);
1817
- padding: 16px 28px;
1818
- }
1819
-
1820
- @media (max-width: 960px) {
1821
- .altertable-sheet[data-wide] {
1822
- box-shadow: none;
1823
- border: 0;
1824
- inset: auto 0 0;
1825
- translate: 0 100%;
1826
- }
1827
-
1828
- .altertable-sheet[data-wide][open] {
1829
- translate: 0;
1830
- }
1831
-
1832
- .altertable-sheet[data-wide][open][data-closing] {
1833
- translate: 0 100%;
1834
- }
1835
-
1836
- @starting-style {
1837
- .altertable-sheet[data-wide][open] {
1838
- translate: 0 100%;
1839
- }
1840
- }
1841
- }
1842
-
1843
- @media (max-width: 600px) {
1844
- .altertable-sheet {
1845
- box-shadow: none;
1846
- border: 0;
1847
- inset: auto 0 0;
1848
- translate: 0 100%;
1849
- }
1850
-
1851
- .altertable-sheet[open] {
1852
- translate: 0;
1853
- }
1854
-
1855
- .altertable-sheet[open][data-closing] {
1856
- translate: 0 100%;
1857
- }
1858
-
1859
- @starting-style {
1860
- .altertable-sheet[open] {
1861
- translate: 0 100%;
1862
- }
1863
- }
1864
-
1865
- .altertable-sheet-header {
1866
- padding: 20px 20px 16px;
1867
- }
1868
-
1869
- .altertable-sheet-body {
1870
- padding: 20px 20px 32px;
1871
- }
1872
-
1873
- .altertable-sheet-footer {
1874
- padding: 14px 20px;
1875
- }
1876
- }
1877
-
1878
- @media (prefers-reduced-motion: reduce) {
1879
- .altertable-sheet, .altertable-sheet[open][data-closing] {
1880
- transition: none;
1881
- translate: 0;
1882
- }
1883
-
1884
- .altertable-sheet::backdrop {
1885
- transition: none;
1886
- }
1887
-
1888
- @starting-style {
1889
- .altertable-sheet[open] {
1890
- translate: 0;
1891
- }
1892
- }
1893
- }
1894
-
1895
- /* src/react/ui/Tabs.css */
1896
- .react-aria-TabList {
1897
- display: flex;
1898
- gap: var(--at-space-lg, 24px);
1899
- overflow-x: auto;
1900
- overscroll-behavior-x: none;
1901
- border-bottom: 1px solid var(--at-border, #e3e6e8);
1902
- scrollbar-width: none;
1903
- }
1904
-
1905
- .react-aria-Tab {
1906
- color: var(--at-muted, #687078);
1907
- outline: none;
1908
- cursor: pointer;
1909
- border-bottom: 2px solid #0000;
1910
- flex: none;
1911
- margin-bottom: -1px;
1912
- padding: 0 1px 12px;
1913
- transition: color .12s, border-color .16s;
1914
- font-size: 13px;
1915
- font-weight: 550;
1916
- }
1917
-
1918
- .react-aria-Tab[data-hovered] {
1919
- color: var(--at-text, #202124);
1920
- }
1921
-
1922
- .react-aria-Tab[data-selected] {
1923
- border-bottom-color: var(--at-accent, #4779dc);
1924
- color: var(--at-text, #202124);
1925
- }
1926
-
1927
- .react-aria-Tab[data-focus-visible] {
1928
- outline: var(--at-focus-outline, 1px solid #687078);
1929
- outline-offset: var(--at-focus-ring-offset, 2px);
1930
- border-radius: 2px;
1931
- }
1932
-
1933
- .react-aria-Tab[data-disabled] {
1934
- opacity: .45;
1935
- cursor: default;
1936
- }
1937
-
1938
- .react-aria-TabPanels {
1939
- min-width: 0;
1940
- padding-block-start: var(--at-space-md, 16px);
1941
- }
1942
-
1943
- .react-aria-TabPanel {
1944
- outline: none;
1945
- min-width: 0;
1946
- }
1947
-
1948
- .react-aria-TabPanel[data-focus-visible] {
1949
- outline: var(--at-focus-outline, 1px solid #687078);
1950
- outline-offset: var(--at-focus-ring-offset, 2px);
1951
- }
1952
-
1953
- @media (prefers-reduced-motion: reduce) {
1954
- .react-aria-Tab {
1955
- transition: none;
1956
- }
1957
- }
1958
-
1959
- /* src/react/ui/AboutData.css */
1960
- .altertable-about-visual {
1961
- display: grid;
1962
- overflow-x: auto;
1963
- overscroll-behavior-x: none;
1964
- overflow-y: hidden;
1965
- border: 1px solid var(--at-border, #e3e6e8);
1966
- border-radius: var(--at-radius-surface, 12px);
1967
- background: var(--at-subtle, #f6f7f7);
1968
- min-width: 0;
1969
- margin: 0 0 24px;
1970
- padding: 22px 20px 16px;
1971
- }
1972
-
1973
- .altertable-about-visual > * {
1974
- min-width: 0;
1975
- }
1976
-
1977
- .altertable-about-visual[data-kind="metric"] {
1978
- padding: 16px 18px;
1979
- }
1980
-
1981
- .altertable-about-visual[data-kind="widget"] {
1982
- background: var(--at-surface, #fff);
1983
- padding: 0;
1984
- }
1985
-
1986
- .altertable-about-body {
1987
- display: grid;
1988
- gap: 28px;
1989
- min-width: 0;
1990
- }
1991
-
1992
- .altertable-about-glossary-list {
1993
- display: grid;
1994
- gap: 16px;
1995
- }
1996
-
1997
- .altertable-about-glossary-entry {
1998
- display: grid;
1999
- gap: 3px;
2000
- }
2001
-
2002
- .altertable-about-glossary-entry > h3 {
2003
- letter-spacing: -.01em;
2004
- margin: 0;
2005
- font-size: 14px;
2006
- font-weight: 650;
2007
- }
2008
-
2009
- .altertable-about-glossary-entry > p {
2010
- margin: 0;
2011
- line-height: 1.55;
2012
- }
2013
-
2014
- .altertable-about-tabs {
2015
- display: grid;
2016
- gap: 0;
2017
- min-width: 0;
2018
- }
2019
-
2020
- .altertable-about-tabbar {
2021
- position: sticky;
2022
- z-index: 2;
2023
- background: var(--at-surface, #fff);
2024
- margin-top: -24px;
2025
- padding: 24px 0 14px;
2026
- top: -24px;
2027
- }
2028
-
2029
- @media (max-width: 600px) {
2030
- .altertable-about-tabbar {
2031
- margin-top: -20px;
2032
- padding-top: 20px;
2033
- top: -20px;
2034
- }
2035
- }
2036
-
2037
- .altertable-about-tabs .react-aria-TabList {
2038
- display: flex;
2039
- background: var(--at-subtle, #f6f7f7);
2040
- border: 0;
2041
- border-radius: 10px;
2042
- flex-wrap: wrap;
2043
- gap: 2px;
2044
- width: 100%;
2045
- max-width: 100%;
2046
- padding: 3px;
2047
- }
2048
-
2049
- .altertable-about-tabs .react-aria-TabPanels {
2050
- padding-top: 14px;
2051
- }
2052
-
2053
- .altertable-about-tabs .react-aria-Tab {
2054
- border: 0;
2055
- border-radius: 8px;
2056
- margin: 0;
2057
- padding: 6px 10px;
2058
- font-size: 12px;
2059
- font-weight: 600;
2060
- }
2061
-
2062
- .altertable-about-tabs .react-aria-Tab[data-selected] {
2063
- background: var(--at-surface, #fff);
2064
- color: var(--at-text, #202124);
2065
- box-shadow: 0 0 0 1px var(--at-border, #e3e6e8);
2066
- }
2067
-
2068
- .altertable-about-tabs .react-aria-TabPanel {
2069
- min-width: 0;
2070
- }
2071
-
2072
- /* src/react/ui/AppHeader.css */
2073
- .altertable-app-header {
2074
- border-bottom: 1px solid var(--at-border, #e3e6e8);
2075
- padding-bottom: 12px;
2076
- }
2077
-
2078
- .altertable-app-header-heading {
2079
- min-width: 0;
2080
- }
2081
-
2082
- .altertable-app-header-primary {
2083
- display: flex;
2084
- flex-wrap: wrap;
2085
- align-items: baseline;
2086
- gap: 4px 14px;
2087
- min-width: 0;
2088
- }
2089
-
2090
- .altertable-app-header-context {
2091
- display: inline-flex;
2092
- align-items: baseline;
2093
- gap: 5px;
2094
- min-width: 0;
2095
- }
2096
-
2097
- .altertable-app-header-connector {
2098
- color: var(--at-muted, #687078);
2099
- font-size: 11px;
2100
- font-weight: 600;
2101
- line-height: 1.2;
2102
- }
2103
-
2104
- .altertable-app-header-primary h1 {
2105
- font-family: var(--at-font-heading, inherit);
2106
- letter-spacing: -.03em;
2107
- overflow-wrap: anywhere;
2108
- text-wrap: balance;
2109
- margin: 0;
2110
- font-size: clamp(22px, 2.4vw, 28px);
2111
- font-weight: 680;
2112
- line-height: 1.15;
2113
- }
2114
-
2115
- .altertable-app-header-heading > p {
2116
- color: var(--at-muted, #687078);
2117
- text-wrap: pretty;
2118
- max-width: 68ch;
2119
- margin: 4px 0 0;
2120
- font-size: 13px;
2121
- line-height: 1.45;
2122
- }
2123
-
2124
- .altertable-app-header-toolbar {
2125
- flex: none;
2126
- align-self: center;
2127
- margin-inline-start: auto;
2128
- }
2129
-
2130
- @media (max-width: 700px) {
2131
- .altertable-app-header-primary {
2132
- gap: 8px 12px;
2133
- }
2134
-
2135
- .altertable-app-header-primary h1 {
2136
- flex-basis: 100%;
2137
- }
2138
-
2139
- .altertable-app-header-context {
2140
- flex: 160px;
2141
- min-width: min(100%, 160px);
2142
- }
2143
-
2144
- .altertable-app-header-toolbar {
2145
- flex: none;
2146
- }
2147
-
2148
- .altertable-app-header-heading > p {
2149
- margin-top: 8px;
2150
- }
2151
- }
2152
-
2153
- /* src/react/ui/AppFooter.css */
2154
- .altertable-app-footer {
2155
- color: var(--at-muted, #687078);
2156
- font: 12px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
2157
- }
2158
-
2159
- .altertable-app-footer-inner {
2160
- width: min(100% - 48px, var(--at-content-width, 1200px));
2161
- padding-block: var(--at-space-lg, 24px);
2162
- display: flex;
2163
- justify-content: space-between;
2164
- align-items: center;
2165
- gap: var(--at-space-md, 16px);
2166
- margin: 0 auto;
2167
- }
2168
-
2169
- .altertable-app-footer-actions {
2170
- display: flex;
2171
- align-items: center;
2172
- min-width: 0;
2173
- }
2174
-
2175
- .altertable-app-footer a {
2176
- display: inline-flex;
2177
- color: inherit;
2178
- text-decoration: none;
2179
- white-space: nowrap;
2180
- align-items: center;
2181
- gap: 4px;
2182
- }
2183
-
2184
- .altertable-app-footer-logo {
2185
- color: var(--at-text, #202124);
2186
- width: 92px;
2187
- height: 16px;
2188
- margin-left: 4px;
2189
- }
2190
-
2191
- .altertable-app-footer a:hover {
2192
- color: var(--at-text, #202124);
2193
- }
2194
-
2195
- .altertable-app-footer a:focus-visible {
2196
- outline: var(--at-focus-outline, 1px solid #687078);
2197
- outline-offset: var(--at-focus-ring-offset, 2px);
2198
- }
2199
-
2200
- @media (max-width: 600px) {
2201
- .altertable-app-footer-inner {
2202
- width: min(100% - 32px, var(--at-content-width, 1200px));
2203
- }
2204
- }
2205
-
2206
- /* src/react/ui/AppLayout.css */
2207
- html {
2208
- scrollbar-gutter: stable;
2209
- }
2210
-
2211
- body, #root {
2212
- margin: 0;
2213
- }
2214
-
2215
- .altertable-app-layout {
2216
- display: flex;
2217
- flex-direction: column;
2218
- min-height: 100dvh;
2219
- }
2220
-
2221
- .altertable-app-main {
2222
- display: grid;
2223
- align-content: start;
2224
- gap: var(--at-layout-gap, 24px);
2225
- width: min(100% - 48px, var(--at-content-width, 1200px));
2226
- padding: var(--at-layout-gap, 24px) 0 var(--at-space-md, 16px);
2227
- min-width: 0;
2228
- margin-inline-start: auto;
2229
- margin-inline-end: auto;
2230
- }
2231
-
2232
- .altertable-app-body {
2233
- min-width: 0;
2234
- }
2235
-
2236
- .altertable-app-footer {
2237
- margin-top: auto;
2238
- }
2239
-
2240
- .altertable-sr-only {
2241
- position: fixed;
2242
- overflow: hidden;
2243
- clip: rect(0, 0, 0, 0);
2244
- clip-path: inset(50%);
2245
- white-space: nowrap;
2246
- border: 0;
2247
- width: 1px;
2248
- height: 1px;
2249
- margin: -1px;
2250
- padding: 0;
2251
- }
2252
-
2253
- @media (max-width: 600px) {
2254
- .altertable-app-main {
2255
- width: min(100% - 32px, var(--at-content-width, 1200px));
2256
- }
2257
- }
2258
-
2259
- :root {
2260
- --at-content-width: 960px;
2261
- font-family: var(--at-font, ui-sans-serif, system-ui, sans-serif);
2262
- color: var(--at-text, #202124);
2263
- background: var(--at-background, #fff);
2264
- font-synthesis: none;
2265
- -webkit-font-smoothing: antialiased;
2266
- text-rendering: optimizeLegibility;
2267
- }
2268
-
2269
- * {
2270
- box-sizing: border-box;
2271
- }
2272
-
2273
- button {
2274
- font: inherit;
2275
- cursor: pointer;
2276
- }
2277
-
2278
- /* src/react/ui/AppScope.css */
2279
- .altertable-app-scope {
2280
- display: inline-flex;
2281
- color: var(--at-muted, #687078);
2282
- font: 600 11px / 1.2 var(--at-font, ui-sans-serif, system-ui, sans-serif);
2283
- align-items: center;
2284
- gap: 5px;
2285
- max-width: 100%;
2286
- }
2287
-
2288
- .altertable-app-scope-organization {
2289
- overflow: hidden;
2290
- text-overflow: ellipsis;
2291
- white-space: nowrap;
2292
- color: var(--at-text, #202124);
2293
- letter-spacing: .06em;
2294
- text-transform: uppercase;
2295
- font-size: 12px;
2296
- font-weight: 680;
2297
- line-height: 1.3;
2298
- }
2299
-
2300
- .altertable-app-scope-environment {
2301
- background: var(--at-subtle, #f6f7f7);
2302
- color: var(--at-muted, #687078);
2303
- letter-spacing: .01em;
2304
- border-radius: 999px;
2305
- padding: 4px 8px;
2306
- font-size: 11px;
2307
- font-weight: 600;
2308
- }
2309
-
2310
- /* src/react/ui/LiveControl.css */
2311
- .altertable-live-control {
2312
- display: inline-flex;
2313
- overflow: hidden;
2314
- border: 1px solid var(--at-border, #e3e6e8);
2315
- border-radius: var(--at-radius-control, 7px);
2316
- background: var(--at-surface, #fff);
2317
- box-shadow: var(--at-shadow-surface, 0 3px 16px #141c280d);
2318
- flex: none;
2319
- align-self: flex-start;
2320
- align-items: stretch;
2321
- width: -moz-fit-content;
2322
- width: fit-content;
2323
- max-width: 100%;
2324
- height: 36px;
2325
- }
2326
-
2327
- .altertable-live-control .altertable-button[data-size="icon"] {
2328
- position: relative;
2329
- box-shadow: none;
2330
- background: none;
2331
- border: 0;
2332
- border-radius: 0;
2333
- width: 35px;
2334
- min-width: 35px;
2335
- height: 34px;
2336
- min-height: 34px;
2337
- padding: 0;
2338
- }
2339
-
2340
- .altertable-live-control[data-active="true"] {
2341
- border-color: var(--at-accent, #4779dc);
2342
- }
2343
-
2344
- .altertable-live-control[data-active="true"] .altertable-button {
2345
- color: var(--at-accent, #4779dc);
2346
- }
2347
-
2348
- .altertable-live-control[data-active="true"] .altertable-button:after {
2349
- position: absolute;
2350
- content: "";
2351
- background: currentColor;
2352
- border-radius: 50%;
2353
- width: 5px;
2354
- height: 5px;
2355
- top: 5px;
2356
- right: 5px;
2357
- }
2358
-
2359
- .altertable-live-frequency {
2360
- border-left: 1px solid var(--at-border, #e3e6e8);
2361
- width: 28px;
2362
- height: 34px;
2363
- }
2364
-
2365
- .altertable-live-frequency > button {
2366
- display: grid;
2367
- color: var(--at-muted, #687078);
2368
- cursor: pointer;
2369
- background: none;
2370
- border: 0;
2371
- border-radius: 0;
2372
- place-items: center;
2373
- width: 100%;
2374
- height: 100%;
2375
- padding: 0;
2376
- }
2377
-
2378
- .altertable-live-frequency > button:hover {
2379
- background: var(--at-subtle, #f6f7f7);
2380
- }
2381
-
2382
- .altertable-live-frequency > button[data-focus-visible] {
2383
- outline: var(--at-focus-outline, 1px solid #687078);
2384
- outline-offset: var(--at-focus-ring-inset, -1px);
2385
- }
2386
-
2387
- .altertable-live-control .altertable-button:focus-visible {
2388
- outline-offset: var(--at-focus-ring-inset, -1px);
2389
- }
2390
-
2391
- .altertable-live-frequency-popover {
2392
- z-index: 1000;
2393
- border: 1px solid var(--at-border, #e3e6e8);
2394
- border-radius: var(--at-radius-control, 7px);
2395
- background: var(--at-surface, #fff);
2396
- color: var(--at-text, #202326);
2397
- min-width: 190px;
2398
- padding: 4px;
2399
- box-shadow: 0 12px 32px #0000002e;
2400
- }
2401
-
2402
- .altertable-live-frequency-popover [role="option"] {
2403
- display: flex;
2404
- cursor: pointer;
2405
- outline: none;
2406
- border-radius: 4px;
2407
- justify-content: space-between;
2408
- align-items: center;
2409
- gap: 16px;
2410
- min-height: 34px;
2411
- padding: 6px 9px;
2412
- font-size: 13px;
2413
- }
2414
-
2415
- .altertable-live-frequency-popover [role="option"]:-webkit-any([data-focused], [data-hovered]) {
2416
- background: var(--at-subtle, #f6f7f7);
2417
- }
2418
-
2419
- .altertable-live-frequency-popover [role="option"]:-moz-any([data-focused], [data-hovered]) {
2420
- background: var(--at-subtle, #f6f7f7);
2421
- }
2422
-
2423
- .altertable-live-frequency-popover [role="option"]:is([data-focused], [data-hovered]) {
2424
- background: var(--at-subtle, #f6f7f7);
2425
- }
2426
-
2427
- .altertable-live-frequency-popover [role="option"][data-focus-visible] {
2428
- outline: var(--at-focus-outline, 1px solid #687078);
2429
- outline-offset: var(--at-focus-ring-inset, -1px);
2430
- }
2431
-
2432
- .altertable-live-frequency-popover [role="option"][data-selected] {
2433
- color: var(--at-accent, #4779dc);
2434
- font-weight: 600;
2435
- }
2436
-
2437
- .altertable-live-frequency-popover [role="option"]:not([data-selected]) svg {
2438
- visibility: hidden;
2439
- }
2440
-
2441
- .altertable-visually-hidden {
2442
- position: absolute;
2443
- overflow: hidden;
2444
- clip-path: inset(50%);
2445
- white-space: nowrap;
2446
- width: 1px;
2447
- height: 1px;
2448
- }
2449
-
2450
- /* src/react/ui/ThemeSelector.css */
2451
- .altertable-theme-selector {
2452
- display: inline-flex;
2453
- border-radius: var(--at-radius-control, 7px);
2454
- background: var(--at-subtle, #f6f7f7);
2455
- border: 0;
2456
- align-items: center;
2457
- gap: 2px;
2458
- margin: 0;
2459
- padding: 3px;
2460
- }
2461
-
2462
- .altertable-theme-legend {
2463
- position: absolute;
2464
- overflow: hidden;
2465
- clip-path: inset(50%);
2466
- white-space: nowrap;
2467
- width: 1px;
2468
- height: 1px;
2469
- }
2470
-
2471
- .altertable-theme-selector label {
2472
- position: relative;
2473
- display: grid;
2474
- border-radius: var(--at-radius-control, 7px);
2475
- color: var(--at-muted, #687078);
2476
- cursor: pointer;
2477
- background: none;
2478
- place-items: center;
2479
- width: 30px;
2480
- height: 30px;
2481
- padding: 0;
2482
- }
2483
-
2484
- .altertable-theme-selector input {
2485
- position: absolute;
2486
- opacity: 0;
2487
- cursor: pointer;
2488
- width: 100%;
2489
- height: 100%;
2490
- margin: 0;
2491
- inset: 0;
2492
- }
2493
-
2494
- .altertable-theme-selector label:hover {
2495
- color: var(--at-text, #202124);
2496
- }
2497
-
2498
- .altertable-theme-selector label:has(input:checked) {
2499
- background: var(--at-surface, #fff);
2500
- color: var(--at-text, #202124);
2501
- box-shadow: 0 1px 3px #0000001a;
2502
- }
2503
-
2504
- .altertable-theme-selector label:has(input:focus-visible) {
2505
- outline: var(--at-focus-outline, 1px solid #687078);
2506
- outline-offset: var(--at-focus-ring-offset, 2px);
2507
- }
2508
-
2509
- /* src/react/ui/PresentStory.css */
2510
- :root:has(.altertable-present-dialog:modal) {
2511
- overflow: hidden;
2512
- }
2513
-
2514
- .altertable-present-launch {
2515
- position: relative;
2516
- display: inline-flex;
2517
- }
2518
-
2519
- .altertable-present-dialog:not([open]) {
2520
- display: none;
2521
- }
2522
-
2523
- .altertable-present-dialog {
2524
- position: fixed;
2525
- background: var(--at-background, #fff);
2526
- color: var(--at-text, #202124);
2527
- overscroll-behavior: contain;
2528
- opacity: 0;
2529
- transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
2530
- border: 0;
2531
- width: 100vw;
2532
- max-width: none;
2533
- height: 100dvh;
2534
- max-height: none;
2535
- margin: 0;
2536
- padding: 0;
2537
- inset: 0;
2538
- }
2539
-
2540
- .altertable-present-dialog[open] {
2541
- opacity: 1;
2542
- }
2543
-
2544
- @starting-style {
2545
- .altertable-present-dialog[open] {
2546
- opacity: 0;
2547
- }
2548
- }
2549
-
2550
- .altertable-present-dialog::backdrop {
2551
- background: none;
2552
- }
2553
-
2554
- .altertable-present-dialog button:focus-visible {
2555
- outline: var(--at-focus-outline, 1px solid #687078);
2556
- outline-offset: var(--at-focus-ring-offset, 2px);
2557
- }
2558
-
2559
- .altertable-present-shell {
2560
- display: flex;
2561
- flex-direction: column;
2562
- height: 100%;
2563
- min-height: 0;
2564
- }
2565
-
2566
- .altertable-present-header, .altertable-present-nav {
2567
- display: flex;
2568
- align-items: center;
2569
- gap: var(--at-space-md, 16px);
2570
- flex: none;
2571
- width: min(100% - 48px, 1200px);
2572
- margin: 0 auto;
2573
- }
2574
-
2575
- .altertable-present-header {
2576
- border-bottom: 1px solid var(--at-border, #e3e6e8);
2577
- min-height: 60px;
2578
- font-size: 13px;
2579
- }
2580
-
2581
- .altertable-present-title {
2582
- display: flex;
2583
- flex-wrap: wrap;
2584
- flex: 1;
2585
- align-items: center;
2586
- gap: 3px 6px;
2587
- min-width: 0;
2588
- line-height: 24px;
2589
- }
2590
-
2591
- .altertable-present-title strong {
2592
- overflow: hidden;
2593
- text-overflow: ellipsis;
2594
- white-space: nowrap;
2595
- font-size: 14px;
2596
- font-weight: 650;
2597
- line-height: 24px;
2598
- }
2599
-
2600
- .altertable-present-connector {
2601
- color: var(--at-muted, #687078);
2602
- font-weight: 400;
2603
- }
2604
-
2605
- .altertable-present-title .altertable-app-scope {
2606
- min-width: 0;
2607
- line-height: 24px;
2608
- }
2609
-
2610
- .altertable-present-title .altertable-app-scope-environment {
2611
- line-height: 16px;
2612
- }
2613
-
2614
- .altertable-present-count {
2615
- color: var(--at-muted, #687078);
2616
- font-variant-numeric: tabular-nums;
2617
- flex: none;
2618
- font-size: 11px;
2619
- }
2620
-
2621
- .altertable-present-actions {
2622
- display: flex;
2623
- flex: none;
2624
- align-items: center;
2625
- gap: 4px;
2626
- }
2627
-
2628
- .altertable-present-theme {
2629
- display: inline-flex;
2630
- margin-inline-start: var(--at-space-sm, 8px);
2631
- }
2632
-
2633
- .altertable-present-main {
2634
- display: grid;
2635
- grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
2636
- align-content: safe center;
2637
- align-items: start;
2638
- column-gap: clamp(28px, 5vw, 72px);
2639
- row-gap: var(--at-space-lg, 24px);
2640
- padding: var(--at-space-lg, 24px) 0;
2641
- overflow-y: auto;
2642
- overscroll-behavior-y: contain;
2643
- animation: .26s cubic-bezier(.2,.7,.2,1) altertable-present-step;
2644
- flex: 1;
2645
- width: min(100% - 64px, 1100px);
2646
- min-height: 0;
2647
- margin: 0 auto;
2648
- }
2649
-
2650
- @keyframes altertable-present-step {
2651
- from {
2652
- opacity: 0;
2653
- translate: 0 6px;
2654
- }
2655
- }
2656
-
2657
- .altertable-present-copy {
2658
- min-width: 0;
2659
- }
2660
-
2661
- .altertable-present-copy > h2 {
2662
- font-family: var(--at-font-heading, inherit);
2663
- letter-spacing: -.04em;
2664
- overflow-wrap: anywhere;
2665
- text-wrap: balance;
2666
- margin: 0;
2667
- font-size: clamp(30px, 3.8vw, 50px);
2668
- font-weight: 650;
2669
- line-height: 1.1;
2670
- }
2671
-
2672
- .altertable-present-copy > h2:focus {
2673
- outline: none;
2674
- }
2675
-
2676
- .altertable-present-explore {
2677
- margin-top: var(--at-space-lg, 24px);
2678
- }
2679
-
2680
- .altertable-present-copy > p {
2681
- margin: var(--at-space-md, 16px) 0 0;
2682
- color: var(--at-muted, #687078);
2683
- text-wrap: pretty;
2684
- max-width: 58ch;
2685
- font-size: clamp(15px, 1.5vw, 18px);
2686
- line-height: 1.55;
2687
- }
2688
-
2689
- .altertable-present-visual {
2690
- grid-column: 2;
2691
- grid-row: 1;
2692
- display: flex;
2693
- padding: var(--at-space-lg, 24px);
2694
- overflow: auto;
2695
- overscroll-behavior: contain;
2696
- border: 1px solid var(--at-border, #e3e6e8);
2697
- border-radius: var(--at-radius-surface, 12px);
2698
- background: var(--at-surface, #fff);
2699
- align-items: center;
2700
- min-width: 0;
2701
- min-height: clamp(280px, 48vh, 470px);
2702
- max-height: 62vh;
2703
- }
2704
-
2705
- .altertable-present-visual > * {
2706
- width: 100%;
2707
- }
2708
-
2709
- .altertable-present-visual[data-kind="metric"] {
2710
- background: none;
2711
- border: 0;
2712
- padding: 0;
2713
- }
2714
-
2715
- .altertable-present-nav {
2716
- justify-content: space-between;
2717
- min-height: 72px;
2718
- }
2719
-
2720
- .altertable-present-nav > .altertable-tooltip-trigger > button:disabled {
2721
- color: var(--at-muted, #687078);
2722
- }
2723
-
2724
- .altertable-present-dots {
2725
- display: flex;
2726
- align-items: center;
2727
- }
2728
-
2729
- .altertable-present-dots button {
2730
- display: grid;
2731
- border-radius: var(--at-radius-control, 7px);
2732
- cursor: pointer;
2733
- background: none;
2734
- border: 0;
2735
- place-items: center;
2736
- width: 28px;
2737
- height: 44px;
2738
- padding: 0;
2739
- }
2740
-
2741
- .altertable-present-dots button:before {
2742
- background: var(--at-border, #e3e6e8);
2743
- content: "";
2744
- border-radius: 999px;
2745
- width: 7px;
2746
- height: 7px;
2747
- transition: width .2s cubic-bezier(.2,.7,.2,1), background-color .2s;
2748
- }
2749
-
2750
- .altertable-present-dots button:hover:before {
2751
- background: var(--at-muted, #687078);
2752
- }
2753
-
2754
- .altertable-present-dots button[aria-current="step"]:before {
2755
- background: var(--at-accent, #4779dc);
2756
- width: 20px;
2757
- }
2758
-
2759
- @media (max-width: 800px) {
2760
- .altertable-present-main {
2761
- grid-template-columns: minmax(0, 1fr);
2762
- align-content: start;
2763
- gap: var(--at-space-lg, 24px);
2764
- width: min(100% - 40px, 640px);
2765
- }
2766
-
2767
- .altertable-present-visual {
2768
- grid-column: 1;
2769
- grid-row: 2;
2770
- min-height: 220px;
2771
- max-height: none;
2772
- }
2773
- }
2774
-
2775
- @media (max-width: 600px) {
2776
- .altertable-present-header, .altertable-present-nav {
2777
- width: calc(100% - 32px);
2778
- }
2779
-
2780
- .altertable-present-header {
2781
- min-height: 56px;
2782
- }
2783
-
2784
- .altertable-present-main {
2785
- padding: var(--at-space-md, 16px) 0;
2786
- width: calc(100% - 32px);
2787
- }
2788
-
2789
- .altertable-present-visual {
2790
- padding: var(--at-space-md, 16px);
2791
- }
2792
-
2793
- .altertable-present-nav {
2794
- gap: 0;
2795
- min-height: 64px;
2796
- }
2797
-
2798
- .altertable-present-dots button {
2799
- width: 24px;
2800
- }
2801
- }
2802
-
2803
- @media (prefers-reduced-motion: reduce) {
2804
- .altertable-present-dialog, .altertable-present-dots button:before {
2805
- transition: none;
2806
- }
2807
-
2808
- .altertable-present-main {
2809
- animation: none;
2810
- }
2811
- }
2812
-
2813
- /* src/react/ui/RefreshControl.css */
2814
- .altertable-refresh-control {
2815
- position: relative;
2816
- display: inline-flex;
2817
- align-items: center;
2818
- gap: var(--at-space-sm, 8px);
2819
- }
2820
-
2821
- .altertable-refresh-loading, .altertable-refresh-cancel, .altertable-refresh-control[data-refreshing] .altertable-refresh-idle {
2822
- display: none;
2823
- }
2824
-
2825
- .altertable-refresh-control[data-refreshing] .altertable-refresh-loading {
2826
- display: block;
2827
- animation: .9s linear infinite altertable-refresh-spin;
2828
- }
2829
-
2830
- .altertable-refresh-control[data-refreshing] .altertable-button:has(.altertable-refresh-cancel):hover .altertable-refresh-loading {
2831
- display: none;
2832
- }
2833
-
2834
- .altertable-refresh-control[data-refreshing] .altertable-button:hover .altertable-refresh-cancel {
2835
- display: block;
2836
- }
2837
-
2838
- .altertable-refresh-status {
2839
- color: var(--at-muted, #687078);
2840
- white-space: nowrap;
2841
- font-size: 11px;
2842
- }
2843
-
2844
- .altertable-refresh-status:empty {
2845
- display: none;
2846
- }
2847
-
2848
- @keyframes altertable-refresh-spin {
2849
- to {
2850
- rotate: 360deg;
2851
- }
2852
- }
2853
-
2854
- @media (prefers-reduced-motion: reduce) {
2855
- .altertable-refresh-control[data-refreshing] .altertable-refresh-loading {
2856
- animation: 1.2s ease-in-out infinite alternate altertable-refresh-pulse;
2857
- }
2858
- }
2859
-
2860
- @keyframes altertable-refresh-pulse {
2861
- to {
2862
- opacity: .35;
2863
- }
2864
- }
2865
-
2866
- /* src/react/ui/AppToolbar.css */
2867
- .altertable-app-toolbar {
2868
- display: flex;
2869
- justify-content: flex-end;
2870
- align-items: center;
2871
- gap: var(--at-space-sm, 8px);
2872
- width: 100%;
2873
- }
2874
-
2875
- .altertable-app-toolbar-updated {
2876
- color: color-mix(in srgb, var(--at-muted, #687078) 78%, var(--at-background, #fff));
2877
- white-space: nowrap;
2878
- margin-right: 6px;
2879
- font-size: 11px;
2880
- }
2881
-
2882
- .altertable-app-toolbar-actions {
2883
- display: flex;
2884
- justify-content: flex-end;
2885
- align-items: center;
2886
- gap: var(--at-space-xs, 4px);
2887
- flex-wrap: wrap;
2888
- margin-inline-start: auto;
2889
- }
2890
-
2891
- .altertable-app-toolbar {
2892
- flex-shrink: 0;
2893
- }
2894
-
2895
- /* src/react/ui/VariableBar.css */
2896
- .altertable-variable-bar {
2897
- display: flex;
2898
- align-items: center;
2899
- gap: var(--at-space-sm, 8px);
2900
- flex-wrap: wrap;
2901
- min-width: 0;
2902
- }
2903
-
2904
- .altertable-variable-bar > * {
2905
- min-width: 0;
2906
- max-width: 100%;
2907
- }
2908
-
2909
- /* src/react/ui/DataViewToast.css */
2910
- .altertable-data-view-toast-region {
2911
- position: fixed;
2912
- z-index: 100;
2913
- left: 16px;
2914
- right: 16px;
2915
- bottom: max(20px, env(safe-area-inset-bottom));
2916
- display: flex;
2917
- pointer-events: none;
2918
- justify-content: center;
2919
- }
2920
-
2921
- .altertable-data-view-toast {
2922
- display: flex;
2923
- overflow: auto;
2924
- border: 1px solid var(--at-border, #e3e6e8);
2925
- border-radius: var(--at-radius-surface, 12px);
2926
- background: var(--at-surface, #fff);
2927
- color: var(--at-text, #202124);
2928
- pointer-events: auto;
2929
- align-items: center;
2930
- gap: 10px;
2931
- width: -moz-fit-content;
2932
- width: fit-content;
2933
- max-width: min(100%, 560px);
2934
- max-height: 40dvh;
2935
- padding: 10px 12px;
2936
- font-size: 12px;
2937
- line-height: 1.45;
2938
- box-shadow: 0 10px 32px #0000001f;
2939
- }
2940
-
2941
- .altertable-data-view-toast > svg {
2942
- color: var(--at-muted, #687078);
2943
- flex: none;
2944
- }
2945
-
2946
- .altertable-data-view-toast[data-state="stale-error"] > svg {
2947
- color: var(--at-danger, #b42318);
2948
- }
2949
-
2950
- .altertable-data-view-toast > span {
2951
- min-width: 0;
2952
- }
2953
-
2954
- .altertable-data-view-toast .altertable-button {
2955
- flex: none;
2956
- min-height: 32px;
2957
- }
2958
-
2959
- .altertable-data-view-toast-spinner {
2960
- animation: 1s linear infinite altertable-data-view-toast-spin;
2961
- }
2962
-
2963
- @keyframes altertable-data-view-toast-spin {
2964
- to {
2965
- transform: rotate(360deg);
2966
- }
2967
- }
2968
-
2969
- @media (prefers-reduced-motion: reduce) {
2970
- .altertable-data-view-toast-spinner {
2971
- animation: none;
2972
- }
2973
- }
2974
-
2975
- /* src/react/ui/ContentSkeleton.css */
2976
- .altertable-content-skeleton {
2977
- display: grid;
2978
- align-content: start;
2979
- gap: 14px;
2980
- min-width: 0;
2981
- padding: 24px;
2982
- }
2983
-
2984
- .altertable-content-skeleton-label {
2985
- width: 38%;
2986
- height: 15px;
2987
- }
2988
-
2989
- .altertable-content-skeleton-value {
2990
- width: 56%;
2991
- height: 38px;
2992
- }
2993
-
2994
- .altertable-content-skeleton-chart {
2995
- width: 100%;
2996
- height: 180px;
2997
- }
2998
-
2999
- .altertable-content-skeleton-foot {
3000
- width: 70%;
3001
- height: 12px;
3002
- }
3003
-
3004
- .altertable-content-skeleton-subtitle {
3005
- width: 52%;
3006
- height: 12px;
3007
- }
3008
-
3009
- .altertable-content-skeleton-rows {
3010
- display: grid;
3011
- gap: 18px;
3012
- margin-top: 12px;
3013
- }
3014
-
3015
- .altertable-content-skeleton-row {
3016
- display: grid;
3017
- gap: 8px;
3018
- }
3019
-
3020
- .altertable-content-skeleton-row-label {
3021
- width: 56%;
3022
- height: 14px;
3023
- }
3024
-
3025
- .altertable-content-skeleton-row-track {
3026
- width: 100%;
3027
- height: 8px;
3028
- }
3029
-
3030
- .altertable-content-skeleton-row:nth-child(2) .altertable-content-skeleton-row-track {
3031
- width: 72%;
3032
- }
3033
-
3034
- .altertable-content-skeleton-row:nth-child(3) .altertable-content-skeleton-row-track {
3035
- width: 48%;
3036
- }
3037
-
3038
- .altertable-content-skeleton-row:nth-child(4) .altertable-content-skeleton-row-track {
3039
- width: 30%;
3040
- }
3041
-
3042
- /* src/react/ui/DataBoundary.css */
3043
- .altertable-data-boundary {
3044
- min-width: 0;
3045
- }
3046
-
3047
- .altertable-data-boundary-notice {
3048
- display: flex;
3049
- border: 1px solid var(--at-border, #e3e6e8);
3050
- border-radius: var(--at-radius-control, 8px);
3051
- color: var(--at-muted, #687078);
3052
- background: var(--at-subtle, #f6f7f7);
3053
- flex-wrap: wrap;
3054
- align-items: center;
3055
- gap: 8px;
3056
- min-height: 44px;
3057
- margin: 0 0 14px;
3058
- padding: 8px 12px;
3059
- font-size: 12px;
3060
- line-height: 1.45;
3061
- }
3062
-
3063
- .altertable-data-boundary-notice[data-state="stale-error"] {
3064
- border-color: color-mix(in srgb, var(--at-danger, #b42318) 30%, var(--at-border, #e3e6e8));
3065
- }
3066
-
3067
- .altertable-data-boundary-notice[data-state="stale-error"] > svg {
3068
- color: var(--at-danger, #b42318);
3069
- flex: none;
3070
- }
3071
-
3072
- .altertable-data-boundary-message {
3073
- flex: 240px;
3074
- }
3075
-
3076
- .altertable-data-boundary-action {
3077
- margin-left: auto;
3078
- }
3079
-
3080
- .altertable-data-boundary-action button {
3081
- min-height: 32px;
3082
- }
3083
-
3084
- .altertable-data-boundary-spinner {
3085
- animation: 1s linear infinite altertable-data-boundary-spin;
3086
- flex: none;
3087
- }
3088
-
3089
- @keyframes altertable-data-boundary-spin {
3090
- to {
3091
- transform: rotate(360deg);
3092
- }
3093
- }
3094
-
3095
- .altertable-data-boundary-content {
3096
- transition: opacity .18s;
3097
- }
3098
-
3099
- .altertable-data-boundary-content[data-updating="true"] {
3100
- opacity: .58;
3101
- transition: opacity .18s .45s;
3102
- }
3103
-
3104
- @media (prefers-reduced-motion: reduce) {
3105
- .altertable-data-boundary-content, .altertable-data-boundary-content[data-updating="true"] {
3106
- transition: none;
3107
- }
3108
-
3109
- .altertable-data-boundary-spinner {
3110
- animation: none;
3111
- }
3112
- }
3113
-
3114
- /* src/react/ui/StatusPanel.css */
3115
- .altertable-status-panel {
3116
- display: flex;
3117
- justify-content: space-between;
3118
- align-items: center;
3119
- gap: var(--at-space-lg, 24px);
3120
- padding: var(--at-space-lg, 24px);
3121
- border: 1px solid var(--at-border, #e3e6e8);
3122
- border-radius: var(--at-radius-surface, 12px);
3123
- background: var(--at-surface, #fff);
3124
- color: var(--at-muted, #687078);
3125
- font-size: 13px;
3126
- line-height: 1.5;
3127
- }
3128
-
3129
- .altertable-status-panel[data-status="error"] {
3130
- box-sizing: border-box;
3131
- display: grid;
3132
- grid-template-columns: 18px minmax(0, 1fr);
3133
- align-items: start;
3134
- gap: 18px 14px;
3135
- width: min(100%, 520px);
3136
- margin: clamp(16px, 4vw, 48px) auto 0;
3137
- }
3138
-
3139
- .altertable-status-panel[data-status="error"] > svg {
3140
- color: var(--at-danger, #b42318);
3141
- margin-top: 1px;
3142
- }
3143
-
3144
- .altertable-status-panel[data-status="error"] .altertable-status-action {
3145
- grid-column: 2;
3146
- }
3147
-
3148
- .altertable-status-panel[data-status="error"] .altertable-status-copy {
3149
- min-width: 0;
3150
- }
3151
-
3152
- .altertable-status-panel strong {
3153
- color: var(--at-text, #202124);
3154
- font-weight: 650;
3155
- }
3156
-
3157
- .altertable-status-panel p {
3158
- margin: 4px 0 0;
3159
- }
3160
-
3161
- .altertable-status-panel small {
3162
- display: block;
3163
- overflow-wrap: anywhere;
3164
- margin-top: 6px;
3165
- }
3166
-
3167
- .altertable-status-action {
3168
- flex: none;
3169
- }
3170
-
3171
- @media (max-width: 600px) {
3172
- .altertable-status-panel:not([data-status="error"]) {
3173
- flex-direction: column;
3174
- align-items: flex-start;
3175
- }
3176
- }
3177
-
3178
- /* src/react/ui/GettingStarted.css */
3179
- .starter-eyebrow {
3180
- color: var(--at-muted, #687078);
3181
- letter-spacing: .08em;
3182
- text-transform: uppercase;
3183
- font-size: 11px;
3184
- font-weight: 700;
3185
- }
3186
-
3187
- .starter-connection {
3188
- display: flex;
3189
- border: 1px solid var(--at-border, #e3e6e8);
3190
- border-radius: var(--at-radius-surface, 12px);
3191
- background: var(--at-surface, #fff);
3192
- align-items: flex-start;
3193
- gap: 20px;
3194
- min-width: 0;
3195
- padding: 30px;
3196
- }
3197
-
3198
- .starter-connection-icon {
3199
- display: grid;
3200
- background: var(--at-subtle, #f6f7f7);
3201
- color: var(--at-muted, #687078);
3202
- border-radius: 14px;
3203
- flex: none;
3204
- place-items: center;
3205
- width: 48px;
3206
- height: 48px;
3207
- }
3208
-
3209
- .starter-connection[data-state="connected"] .starter-connection-icon {
3210
- background: color-mix(in srgb, var(--at-accent, #405d47) 12%, var(--at-surface, #fff));
3211
- color: var(--at-accent, #405d47);
3212
- }
3213
-
3214
- .starter-connection[data-state="error"] .starter-connection-icon {
3215
- background: color-mix(in srgb, var(--at-danger, #b42318) 9%, var(--at-surface, #fff));
3216
- color: var(--at-danger, #b42318);
3217
- }
3218
-
3219
- .starter-connection[data-state="checking"] .starter-connection-icon svg {
3220
- animation: 1.5s linear infinite starter-spin;
3221
- }
3222
-
3223
- .starter-connection-copy {
3224
- flex: 1;
3225
- min-width: 0;
3226
- }
3227
-
3228
- .starter-connection h2 {
3229
- font-family: var(--at-font-heading, inherit);
3230
- letter-spacing: -.035em;
3231
- margin: 8px 0 6px;
3232
- font-size: clamp(26px, 3.2vw, 36px);
3233
- font-weight: 680;
3234
- line-height: 1.15;
3235
- }
3236
-
3237
- .starter-connection p {
3238
- color: var(--at-muted, #687078);
3239
- max-width: 62ch;
3240
- margin: 0;
3241
- font-size: 14px;
3242
- line-height: 1.55;
3243
- }
3244
-
3245
- .starter-connection small {
3246
- display: block;
3247
- color: var(--at-muted, #687078);
3248
- margin-top: 14px;
3249
- font-size: 12px;
3250
- }
3251
-
3252
- .starter-connection > .altertable-button {
3253
- flex: none;
3254
- align-self: center;
3255
- }
3256
-
3257
- .starter-next {
3258
- min-width: 0;
3259
- padding: 8px 0;
3260
- }
3261
-
3262
- .starter-next-heading h2 {
3263
- font-family: var(--at-font-heading, inherit);
3264
- letter-spacing: -.025em;
3265
- margin: 8px 0 4px;
3266
- font-size: clamp(20px, 2.4vw, 26px);
3267
- font-weight: 680;
3268
- }
3269
-
3270
- .starter-next-heading p {
3271
- color: var(--at-muted, #687078);
3272
- margin: 0;
3273
- font-size: 14px;
3274
- line-height: 1.5;
3275
- }
3276
-
3277
- .starter-steps {
3278
- display: grid;
3279
- grid-template-columns: repeat(3, minmax(0, 1fr));
3280
- list-style: none;
3281
- counter-reset: starter-step;
3282
- gap: 12px;
3283
- margin: 22px 0 0;
3284
- padding: 0;
3285
- }
3286
-
3287
- .starter-steps li {
3288
- border: 1px solid var(--at-border, #e3e6e8);
3289
- border-radius: var(--at-radius-surface, 12px);
3290
- background: var(--at-surface, #fff);
3291
- counter-increment: starter-step;
3292
- min-width: 0;
3293
- padding: 20px;
3294
- }
3295
-
3296
- .starter-steps li:before {
3297
- display: block;
3298
- color: var(--at-accent, #405d47);
3299
- content: "0" counter(starter-step);
3300
- margin-bottom: 22px;
3301
- font-size: 12px;
3302
- font-weight: 700;
3303
- }
3304
-
3305
- .starter-steps strong {
3306
- font-size: 14px;
3307
- font-weight: 650;
3308
- }
3309
-
3310
- .starter-steps p {
3311
- color: var(--at-muted, #687078);
3312
- margin: 8px 0 0;
3313
- font-size: 13px;
3314
- line-height: 1.5;
3315
- }
3316
-
3317
- .starter-steps code {
3318
- color: var(--at-text, #202124);
3319
- overflow-wrap: anywhere;
3320
- font-size: .92em;
3321
- }
3322
-
3323
- @keyframes starter-spin {
3324
- to {
3325
- transform: rotate(360deg);
3326
- }
3327
- }
3328
-
3329
- @media (prefers-reduced-motion: reduce) {
3330
- .starter-connection[data-state="checking"] .starter-connection-icon svg {
3331
- animation: none;
3332
- }
3333
- }
3334
-
3335
- @media (max-width: 700px) {
3336
- .starter-connection {
3337
- flex-wrap: wrap;
3338
- padding: 22px;
3339
- }
3340
-
3341
- .starter-connection > .altertable-button {
3342
- margin-left: 68px;
3343
- }
3344
-
3345
- .starter-steps {
3346
- grid-template-columns: 1fr;
3347
- }
3348
-
3349
- .starter-steps li:before {
3350
- margin-bottom: 10px;
3351
- }
3352
- }
3353
-
3354
- /* src/react/ui/Stack.css */
3355
- .altertable-stack {
3356
- display: grid;
3357
- align-content: start;
3358
- min-width: 0;
3359
- }
3360
-
3361
- .altertable-stack[data-gap="sm"] {
3362
- gap: var(--at-space-sm, 8px);
3363
- }
3364
-
3365
- .altertable-stack[data-gap="md"] {
3366
- gap: var(--at-space-md, 16px);
3367
- }
3368
-
3369
- .altertable-stack[data-gap="lg"] {
3370
- gap: var(--at-layout-gap, 24px);
3371
- }
3372
-
3373
- /* src/react/ui/Grid.css */
3374
- .altertable-grid {
3375
- display: grid;
3376
- container: altertable-grid / inline-size;
3377
- --at-grid-gap: var(--at-layout-gap, 24px);
3378
- --at-grid-min-item-width: 240px;
3379
- align-content: start;
3380
- align-items: start;
3381
- gap: var(--at-grid-gap);
3382
- grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--at-grid-min-item-width), var(--at-grid-column-width, 100%))), 1fr));
3383
- min-width: 0;
3384
- }
3385
-
3386
- .altertable-grid > * {
3387
- min-width: 0;
3388
- min-height: 0;
3389
- }
3390
-
3391
- .altertable-grid[data-align="stretch"] {
3392
- align-items: stretch;
3393
- }
3394
-
3395
- .altertable-grid[data-gap="sm"] {
3396
- --at-grid-gap: var(--at-space-sm, 8px);
3397
- }
3398
-
3399
- .altertable-grid[data-gap="md"] {
3400
- --at-grid-gap: var(--at-space-md, 16px);
3401
- }
3402
-
3403
- .altertable-grid[data-gap="lg"] {
3404
- --at-grid-gap: var(--at-layout-gap, 24px);
3405
- }
3406
-
3407
- .altertable-grid[data-min-item-width="compact"] {
3408
- --at-grid-min-item-width: 192px;
3409
- }
3410
-
3411
- .altertable-grid[data-min-item-width="wide"] {
3412
- --at-grid-min-item-width: 320px;
3413
- }
3414
-
3415
- .altertable-grid[data-columns="2"] {
3416
- --at-grid-column-width: calc((100% - var(--at-grid-gap)) / 2);
3417
- }
3418
-
3419
- .altertable-grid[data-columns="3"] {
3420
- --at-grid-column-width: calc((100% - var(--at-grid-gap) - var(--at-grid-gap)) / 3);
3421
- }
3422
-
3423
- .altertable-grid[data-columns="4"] {
3424
- --at-grid-column-width: calc((100% - var(--at-grid-gap) - var(--at-grid-gap) - var(--at-grid-gap)) / 4);
3425
- }
3426
-
3427
- .altertable-grid-item {
3428
- min-width: 0;
3429
- min-height: 0;
3430
- }
3431
-
3432
- @container altertable-grid (width >= 408px) {
3433
- .altertable-grid:not([data-columns="1"])[data-min-item-width="compact"] > .altertable-grid-item[data-span="2"] {
3434
- grid-column: span 2;
3435
- }
3436
- }
3437
-
3438
- @container altertable-grid (width >= 504px) {
3439
- .altertable-grid:not([data-columns="1"])[data-min-item-width="regular"] > .altertable-grid-item[data-span="2"] {
3440
- grid-column: span 2;
3441
- }
3442
- }
3443
-
3444
- @container altertable-grid (width >= 664px) {
3445
- .altertable-grid:not([data-columns="1"])[data-min-item-width="wide"] > .altertable-grid-item[data-span="2"] {
3446
- grid-column: span 2;
3447
- }
3448
- }
3449
-
3450
- @container altertable-grid (width <= 639px) {
3451
- .altertable-grid[data-columns="3"][data-min-item-width="compact"]:has( > .altertable-grid-item[data-span="2"]) > * {
3452
- grid-column: 1 / -1;
3453
- }
3454
-
3455
- .altertable-grid[data-columns="3"][data-min-item-width="compact"]:not(:has( > .altertable-grid-item[data-span="2"])) > :last-child:nth-child(odd) {
3456
- grid-column: 1 / -1;
3457
- }
3458
- }
3459
-
3460
- @container altertable-grid (width <= 783px) {
3461
- .altertable-grid[data-columns="3"][data-min-item-width="regular"]:has( > .altertable-grid-item[data-span="2"]) > * {
3462
- grid-column: 1 / -1;
3463
- }
3464
-
3465
- .altertable-grid[data-columns="3"][data-min-item-width="regular"]:not(:has( > .altertable-grid-item[data-span="2"])) > :last-child:nth-child(odd) {
3466
- grid-column: 1 / -1;
3467
- }
3468
- }
3469
-
3470
- @container altertable-grid (width <= 1023px) {
3471
- .altertable-grid[data-columns="3"][data-min-item-width="wide"]:has( > .altertable-grid-item[data-span="2"]) > * {
3472
- grid-column: 1 / -1;
3473
- }
3474
-
3475
- .altertable-grid[data-columns="3"][data-min-item-width="wide"]:not(:has( > .altertable-grid-item[data-span="2"])) > :last-child:nth-child(odd) {
3476
- grid-column: 1 / -1;
3477
- }
3478
- }
3479
-
3480
- /* src/react/ui/Inspect.css */
3481
- .altertable-inspect-trigger {
3482
- display: inline-grid;
3483
- border-radius: var(--at-radius-control, 6px);
3484
- color: var(--at-muted, #687078);
3485
- cursor: pointer;
3486
- background: none;
3487
- border: 0;
3488
- flex: none;
3489
- place-items: center;
3490
- transition: background-color .12s, color .12s;
3491
- }
3492
-
3493
- .altertable-inspect-trigger:hover, .altertable-inspect-trigger[data-open="true"] {
3494
- background: var(--at-subtle, #f6f7f7);
3495
- color: var(--at-text, #202124);
3496
- }
3497
-
3498
- .altertable-inspect-trigger:focus-visible {
3499
- outline: var(--at-focus-outline, 1px solid #687078);
3500
- outline-offset: var(--at-focus-ring-offset, 2px);
3501
- }
3502
-
3503
- @media (hover: hover) and (pointer: fine) {
3504
- :is(.altertable-metric-widget .altertable-metric-help, .altertable-data-widget .altertable-data-widget-help) {
3505
- opacity: 0;
3506
- transition: opacity .12s;
3507
- }
3508
-
3509
- :is(.altertable-metric-widget:hover .altertable-metric-help, .altertable-metric-widget:focus-within .altertable-metric-help, .altertable-data-widget:hover .altertable-data-widget-help, .altertable-data-widget:focus-within .altertable-data-widget-help, .altertable-metric-help:has( > .altertable-widget-status:not([data-state="idle"])), .altertable-data-widget-help:has( > .altertable-widget-status:not([data-state="idle"])), .altertable-metric-help:has([data-open="true"]), .altertable-data-widget-help:has([data-open="true"])) {
3510
- opacity: 1;
3511
- }
3512
- }
3513
-
3514
- @media (prefers-reduced-motion: reduce) {
3515
- .altertable-inspect-trigger, .altertable-metric-help, .altertable-data-widget-help {
3516
- transition: none;
3517
- }
3518
- }
3519
-
3520
- /* src/react/ui/DataWidget.css */
3521
- .altertable-data-widget {
3522
- border: 1px solid var(--at-border, #e3e6e8);
3523
- border-radius: calc(var(--at-radius-surface, 12px) * 1.5);
3524
- corner-shape: squircle;
3525
- background: var(--at-surface, #fff);
3526
- box-shadow: var(--at-shadow-surface, none);
3527
- min-width: 0;
3528
- }
3529
-
3530
- .altertable-data-widget-header {
3531
- display: flex;
3532
- justify-content: space-between;
3533
- align-items: flex-start;
3534
- gap: var(--at-space-md, 16px);
3535
- padding: var(--at-layout-gap, 24px) var(--at-layout-gap, 24px) 0;
3536
- min-height: 30px;
3537
- }
3538
-
3539
- .altertable-data-widget-header > div:first-child {
3540
- flex: 1;
3541
- min-width: 0;
3542
- }
3543
-
3544
- .altertable-data-widget-help {
3545
- display: flex;
3546
- flex: none;
3547
- align-items: flex-start;
3548
- }
3549
-
3550
- .altertable-data-widget-header h2 {
3551
- color: var(--at-text, #202124);
3552
- font-family: var(--at-font-heading, inherit);
3553
- letter-spacing: -.02em;
3554
- margin: 0;
3555
- font-size: 17px;
3556
- font-weight: 650;
3557
- line-height: 1.3;
3558
- }
3559
-
3560
- .altertable-data-widget-count {
3561
- color: var(--at-muted, #687078);
3562
- letter-spacing: 0;
3563
- white-space: nowrap;
3564
- margin-left: 8px;
3565
- font-size: 12px;
3566
- font-weight: 500;
3567
- }
3568
-
3569
- .altertable-data-widget-header p {
3570
- color: var(--at-muted, #687078);
3571
- margin: 4px 0 0;
3572
- font-size: 12px;
3573
- line-height: 1.45;
3574
- }
3575
-
3576
- .altertable-data-widget-body {
3577
- padding: var(--at-space-md, 16px) var(--at-layout-gap, 24px) var(--at-layout-gap, 24px);
3578
- min-width: 0;
3579
- }
3580
-
3581
- .altertable-data-widget-body[data-padding="flush"] {
3582
- padding: 0;
3583
- }
3584
-
3585
- .altertable-data-widget-footer {
3586
- padding: var(--at-space-md, 16px) var(--at-layout-gap, 24px);
3587
- }
3588
-
3589
- .altertable-data-widget-body > .altertable-status-panel {
3590
- background: none;
3591
- border: 0;
3592
- border-radius: 0;
3593
- margin: 0;
3594
- padding: 0;
3595
- }
3596
-
3597
- /* src/react/ui/WidgetViewTabs.css */
3598
- .altertable-widget-view-tabs > .react-aria-Tabs > .react-aria-TabList {
3599
- border-radius: var(--at-radius-control, 7px);
3600
- background: var(--at-subtle, #f6f7f7);
3601
- border: 0;
3602
- gap: 4px;
3603
- width: -moz-fit-content;
3604
- width: fit-content;
3605
- max-width: 100%;
3606
- margin: 0;
3607
- padding: 3px;
3608
- }
3609
-
3610
- .altertable-widget-view-tabs .react-aria-Tab {
3611
- border-radius: calc(var(--at-radius-control, 7px) - 2px);
3612
- color: var(--at-muted, #687078);
3613
- border: 0;
3614
- margin: 0;
3615
- padding: 6px 11px;
3616
- font-size: 12px;
3617
- }
3618
-
3619
- .altertable-widget-view-tabs .react-aria-Tab[data-selected] {
3620
- background: var(--at-surface, #fff);
3621
- color: var(--at-text, #202124);
3622
- box-shadow: 0 1px 3px #00000014;
3623
- }
3624
-
3625
- .altertable-widget-view-tabs .react-aria-TabPanels {
3626
- padding-block-start: var(--at-space-md, 16px);
3627
- }
3628
-
3629
- /* src/react/ui/VisualizationWidget.css */
3630
- .altertable-visualization-widget-content {
3631
- padding: var(--at-space-md, 16px) var(--at-space-lg, 24px) var(--at-space-lg, 24px);
3632
- min-width: 0;
3633
- }
3634
-
3635
- :where(.altertable-data-widget-body) > .altertable-visualization-widget-content {
3636
- padding: 0;
3637
- }
3638
-
3639
- /* src/react/ui/HelpPopover.css */
3640
- .altertable-help-popover {
3641
- z-index: 1000;
3642
- overflow: auto;
3643
- overscroll-behavior: contain;
3644
- padding: var(--at-space-md, 16px);
3645
- border: 1px solid var(--at-border, #e3e6e8);
3646
- border-radius: var(--at-radius-overlay, 12px);
3647
- background: var(--at-surface, #fff);
3648
- box-shadow: var(--at-shadow-overlay, 0 18px 50px #141c2829);
3649
- color: var(--at-text, #202124);
3650
- font: 13px / 1.5 var(--at-font, ui-sans-serif, system-ui, sans-serif);
3651
- animation: .14s cubic-bezier(.2,.7,.2,1) altertable-popover-in;
3652
- max-width: calc(100vw - 24px);
3653
- max-height: min(65dvh, 560px);
3654
- }
3655
-
3656
- @keyframes altertable-popover-in {
3657
- from {
3658
- opacity: 0;
3659
- translate: 0 -2px;
3660
- }
3661
- }
3662
-
3663
- @media (prefers-reduced-motion: reduce) {
3664
- .altertable-help-popover {
3665
- animation: none;
3666
- }
3667
- }
3668
-
3669
- /* src/react/ui/DateTimeTooltip.css */
3670
- .altertable-date-time-tooltip {
3671
- width: max-content;
3672
- max-width: min(480px, 100vw - 24px);
3673
- padding: 10px 12px;
3674
- }
3675
-
3676
- .altertable-date-time-rows {
3677
- display: grid;
3678
- gap: 6px;
3679
- }
3680
-
3681
- .altertable-date-time-row {
3682
- display: grid;
3683
- grid-template-columns: minmax(80px, 1fr) auto;
3684
- font-variant-numeric: tabular-nums;
3685
- gap: 16px;
3686
- }
3687
-
3688
- .altertable-date-time-row time {
3689
- text-align: right;
3690
- overflow-wrap: anywhere;
3691
- }
3692
-
3693
- .altertable-date-time-label {
3694
- color: var(--at-muted, #626b73);
3695
- }
3696
-
3697
- /* src/react/ui/DataTable.css */
3698
- .altertable-data-table-scroll {
3699
- overflow-x: auto;
3700
- overscroll-behavior-x: none;
3701
- max-width: 100%;
3702
- }
3703
-
3704
- .altertable-data-table-search {
3705
- margin: 8px 0 12px;
3706
- }
3707
-
3708
- .altertable-data-table {
3709
- border-collapse: collapse;
3710
- width: 100%;
3711
- font-size: 12px;
3712
- }
3713
-
3714
- .altertable-data-table caption {
3715
- color: var(--at-muted, #687078);
3716
- text-align: start;
3717
- padding: 0 0 8px;
3718
- font-size: 12px;
3719
- }
3720
-
3721
- .altertable-data-table th, .altertable-data-table td {
3722
- border-bottom: 1px solid var(--at-border, #e3e6e8);
3723
- text-align: start;
3724
- white-space: nowrap;
3725
- cursor: default;
3726
- padding: 9px 10px;
3727
- }
3728
-
3729
- .altertable-data-table thead th {
3730
- color: var(--at-muted, #687078);
3731
- font-weight: 650;
3732
- }
3733
-
3734
- .altertable-data-table tbody th {
3735
- color: var(--at-text, #202124);
3736
- font-weight: 550;
3737
- }
3738
-
3739
- .altertable-data-table :-webkit-any(th, td)[data-type="number"] {
3740
- text-align: end;
3741
- font-variant-numeric: tabular-nums;
3742
- }
3743
-
3744
- .altertable-data-table :-moz-any(th, td)[data-type="number"] {
3745
- text-align: end;
3746
- font-variant-numeric: tabular-nums;
3747
- }
3748
-
3749
- .altertable-data-table :is(th, td)[data-type="number"] {
3750
- text-align: end;
3751
- font-variant-numeric: tabular-nums;
3752
- }
3753
-
3754
- .altertable-data-table :-webkit-any(th, td)[data-type="datetime"] {
3755
- font-variant-numeric: tabular-nums;
3756
- }
3757
-
3758
- .altertable-data-table :-moz-any(th, td)[data-type="datetime"] {
3759
- font-variant-numeric: tabular-nums;
3760
- }
3761
-
3762
- .altertable-data-table :is(th, td)[data-type="datetime"] {
3763
- font-variant-numeric: tabular-nums;
3764
- }
3765
-
3766
- .altertable-data-table-timestamp {
3767
- color: inherit;
3768
- font: inherit;
3769
- font-variant-numeric: tabular-nums;
3770
- cursor: help;
3771
- background: none;
3772
- border: 0;
3773
- padding: 0;
3774
- }
3775
-
3776
- .altertable-data-table-timestamp:hover {
3777
- color: var(--at-accent, #4779dc);
3778
- }
3779
-
3780
- .altertable-data-table-timestamp:focus-visible {
3781
- outline: var(--at-focus-outline, 1px solid #687078);
3782
- outline-offset: var(--at-focus-ring-offset, 2px);
3783
- border-radius: 2px;
3784
- }
3785
-
3786
- .altertable-data-table tbody tr:last-child :-webkit-any(th, td) {
3787
- border-bottom: 0;
3788
- }
3789
-
3790
- .altertable-data-table tbody tr:last-child :-moz-any(th, td) {
3791
- border-bottom: 0;
3792
- }
3793
-
3794
- .altertable-data-table tbody tr:last-child :is(th, td) {
3795
- border-bottom: 0;
3796
- }
3797
-
3798
- .altertable-data-table .altertable-data-table-empty-row td {
3799
- white-space: normal;
3800
- padding: 0;
3801
- }
3802
-
3803
- .altertable-data-table-share {
3804
- font-variant-numeric: tabular-nums;
3805
- }
3806
-
3807
- /* src/react/ui/TableWidget.css */
3808
- .altertable-table-widget-content {
3809
- padding: var(--at-space-md, 16px) var(--at-space-lg, 24px) var(--at-space-lg, 24px);
3810
- min-width: 0;
3811
- }
3812
-
3813
- :where(.altertable-data-widget-body) > .altertable-table-widget-content {
3814
- padding: 0;
3815
- }
3816
-
3817
- .altertable-table-widget-content .altertable-data-table-search {
3818
- margin-top: 0;
3819
- }
3820
-
3821
- .altertable-table-pagination {
3822
- display: flex;
3823
- color: var(--at-muted, #687078);
3824
- font-variant-numeric: tabular-nums;
3825
- flex-wrap: wrap;
3826
- justify-content: space-between;
3827
- align-items: center;
3828
- gap: 8px 16px;
3829
- padding: 12px 10px 4px;
3830
- font-size: 12px;
3831
- }
3832
-
3833
- .altertable-table-pagination-controls {
3834
- display: inline-flex;
3835
- align-items: center;
3836
- gap: 8px;
3837
- }
3838
-
3839
- /* src/react/ui/Breakdown.css */
3840
- .altertable-breakdown {
3841
- display: grid;
3842
- gap: 12px;
3843
- min-width: 0;
3844
- }
3845
-
3846
- .altertable-breakdown-summary {
3847
- display: flex;
3848
- color: var(--at-muted, #687078);
3849
- justify-content: space-between;
3850
- align-items: baseline;
3851
- gap: 12px;
3852
- font-size: 12px;
3853
- }
3854
-
3855
- .altertable-breakdown-summary strong {
3856
- color: var(--at-text, #202124);
3857
- font-variant-numeric: tabular-nums;
3858
- flex: none;
3859
- font-size: 13px;
3860
- font-weight: 650;
3861
- }
3862
-
3863
- .altertable-breakdown-bar {
3864
- display: flex;
3865
- overflow: hidden;
3866
- background: var(--at-subtle, #f6f7f7);
3867
- border-radius: 999px;
3868
- height: 12px;
3869
- }
3870
-
3871
- .altertable-breakdown[data-dominant="true"] .altertable-breakdown-bar {
3872
- height: 8px;
3873
- }
3874
-
3875
- .altertable-breakdown-bar > span {
3876
- display: block;
3877
- flex: none;
3878
- height: 100%;
3879
- }
3880
-
3881
- .altertable-breakdown-list {
3882
- display: grid;
3883
- grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
3884
- gap: 6px 18px;
3885
- min-width: 0;
3886
- margin: 0;
3887
- }
3888
-
3889
- .altertable-breakdown-row {
3890
- display: grid;
3891
- grid-template-columns: minmax(0, 1fr) auto auto;
3892
- border-bottom: 1px solid var(--at-border, #e3e6e8);
3893
- align-items: baseline;
3894
- column-gap: 8px;
3895
- min-width: 0;
3896
- padding: 8px 0;
3897
- font-size: 13px;
3898
- }
3899
-
3900
- .altertable-breakdown-row dt {
3901
- display: flex;
3902
- overflow-wrap: anywhere;
3903
- color: var(--at-text, #202124);
3904
- align-items: baseline;
3905
- gap: 7px;
3906
- min-width: 0;
3907
- }
3908
-
3909
- .altertable-breakdown-row dd {
3910
- font-variant-numeric: tabular-nums;
3911
- text-align: end;
3912
- white-space: nowrap;
3913
- margin: 0;
3914
- }
3915
-
3916
- .altertable-breakdown-swatch {
3917
- display: inline-block;
3918
- background: var(--altertable-breakdown-color);
3919
- border-radius: 2px;
3920
- flex: none;
3921
- width: 8px;
3922
- height: 8px;
3923
- }
3924
-
3925
- .altertable-breakdown-row[data-empty="true"] .altertable-breakdown-swatch {
3926
- border: 1px solid var(--at-border, #e3e6e8);
3927
- background: none;
3928
- }
3929
-
3930
- .altertable-breakdown-value {
3931
- color: var(--at-text, #202124);
3932
- font-weight: 650;
3933
- }
3934
-
3935
- .altertable-breakdown-share {
3936
- color: var(--at-muted, #687078);
3937
- min-width: 4ch;
3938
- }
3939
-
3940
- /* src/react/ui/Ranking.css */
3941
- .altertable-ranking {
3942
- display: grid;
3943
- gap: var(--at-space-md, 16px);
3944
- list-style: none;
3945
- min-width: 0;
3946
- margin: 0;
3947
- padding: 0;
3948
- }
3949
-
3950
- .altertable-ranking li {
3951
- display: grid;
3952
- gap: 7px;
3953
- min-width: 0;
3954
- }
3955
-
3956
- .altertable-ranking-reading {
3957
- display: flex;
3958
- justify-content: space-between;
3959
- align-items: baseline;
3960
- gap: 12px;
3961
- min-width: 0;
3962
- }
3963
-
3964
- .altertable-ranking-reading > span {
3965
- overflow-wrap: anywhere;
3966
- font-family: var(--at-font-heading, inherit);
3967
- letter-spacing: -.01em;
3968
- min-width: 0;
3969
- font-weight: 600;
3970
- line-height: 1.3;
3971
- }
3972
-
3973
- .altertable-ranking-reading strong {
3974
- font-family: var(--at-font-heading, inherit);
3975
- font-variant-numeric: tabular-nums;
3976
- flex: none;
3977
- font-weight: 650;
3978
- }
3979
-
3980
- .altertable-ranking-track {
3981
- overflow: hidden;
3982
- background: var(--at-subtle, #f6f7f7);
3983
- border-radius: 999px;
3984
- height: 6px;
3985
- }
3986
-
3987
- .altertable-ranking-track > span {
3988
- display: block;
3989
- border-radius: inherit;
3990
- background: var(--at-accent, #405d47);
3991
- height: 100%;
3992
- }
3993
-
3994
- .altertable-ranking-detail {
3995
- color: var(--at-muted, #687078);
3996
- font-size: 12px;
3997
- line-height: 1.45;
3998
- }
3999
-
4000
- /* src/react/ui/WidgetDisclosure.css */
4001
- .altertable-widget-disclosure {
4002
- margin: 16px 20px 20px;
4003
- }
4004
-
4005
- .altertable-widget-disclosure > summary {
4006
- display: inline-flex;
4007
- border-radius: var(--at-radius-control, 7px);
4008
- color: var(--at-text, #202124);
4009
- cursor: pointer;
4010
- list-style: none;
4011
- align-items: center;
4012
- gap: 8px;
4013
- min-height: 38px;
4014
- padding: 0 10px;
4015
- font-size: 13px;
4016
- font-weight: 600;
4017
- }
4018
-
4019
- .altertable-widget-disclosure > summary::-webkit-details-marker {
4020
- display: none;
4021
- }
4022
-
4023
- .altertable-widget-disclosure > summary:hover, .altertable-widget-disclosure[open] > summary {
4024
- background: var(--at-subtle, #f6f7f7);
4025
- }
4026
-
4027
- .altertable-widget-disclosure > summary:focus-visible {
4028
- outline: var(--at-focus-outline, 1px solid #687078);
4029
- outline-offset: var(--at-focus-ring-offset, 2px);
4030
- }
4031
-
4032
- .altertable-widget-disclosure > summary svg {
4033
- color: var(--at-muted, #687078);
4034
- transition: transform .16s;
4035
- }
4036
-
4037
- .altertable-widget-disclosure[open] > summary svg {
4038
- transform: rotate(180deg);
4039
- }
4040
-
4041
- .altertable-widget-disclosure-content {
4042
- margin-top: 12px;
4043
- }
4044
-
4045
- @media (prefers-reduced-motion: reduce) {
4046
- .altertable-widget-disclosure > summary svg {
4047
- transition: none;
4048
- }
4049
- }
4050
-
4051
- /* src/react/ui/ComparisonVisual.css */
4052
- .altertable-comparison-visual {
4053
- display: grid;
4054
- gap: 24px;
4055
- width: 100%;
4056
- margin: 0;
4057
- }
4058
-
4059
- .altertable-comparison-visual figcaption {
4060
- color: var(--at-muted, #687078);
4061
- font-size: 13px;
4062
- font-weight: 650;
4063
- }
4064
-
4065
- .altertable-comparison-row {
4066
- display: grid;
4067
- gap: 9px;
4068
- }
4069
-
4070
- .altertable-comparison-row > div {
4071
- display: flex;
4072
- justify-content: space-between;
4073
- align-items: baseline;
4074
- gap: 12px;
4075
- }
4076
-
4077
- .altertable-comparison-row > div > span {
4078
- color: var(--at-muted, #687078);
4079
- font-size: 13px;
4080
- }
4081
-
4082
- .altertable-comparison-row strong {
4083
- color: var(--at-text, #202124);
4084
- font-family: var(--at-font-heading, inherit);
4085
- font-variant-numeric: tabular-nums;
4086
- letter-spacing: -.04em;
4087
- font-size: clamp(22px, 3vw, 32px);
4088
- }
4089
-
4090
- .altertable-comparison-track {
4091
- display: block;
4092
- overflow: hidden;
4093
- background: var(--at-subtle, #f6f7f7);
4094
- border-radius: 999px;
4095
- width: 100%;
4096
- height: 10px;
4097
- }
4098
-
4099
- .altertable-comparison-track > span {
4100
- display: block;
4101
- border-radius: inherit;
4102
- background: var(--at-accent, #405d47);
4103
- min-width: 2px;
4104
- height: 100%;
4105
- }
4106
-
4107
- .altertable-comparison-row[data-period="previous"] .altertable-comparison-track > span {
4108
- background: var(--at-muted, #687078);
4109
- opacity: .45;
4110
- }
4111
-
4112
- .altertable-comparison-change {
4113
- display: inline-flex;
4114
- color: var(--at-muted, #687078);
4115
- font-variant-numeric: tabular-nums;
4116
- align-items: center;
4117
- gap: 5px;
4118
- margin: 0;
4119
- font-size: 13px;
4120
- font-weight: 600;
4121
- }
4122
-
4123
- .altertable-comparison-change[data-tone="good"] {
4124
- color: var(--at-accent, #405d47);
4125
- }
4126
-
4127
- .altertable-comparison-change[data-tone="bad"] {
4128
- color: var(--at-danger, #b42318);
4129
- }
4130
-
4131
- .altertable-about-visual .altertable-comparison-visual {
4132
- gap: 12px;
4133
- }
4134
-
4135
- .altertable-about-visual .altertable-comparison-row {
4136
- gap: 5px;
4137
- }
4138
-
4139
- .altertable-comparison-visual[data-emphasis="story"] {
4140
- gap: clamp(22px, 4vh, 38px);
4141
- }
4142
-
4143
- .altertable-comparison-visual[data-emphasis="story"] figcaption {
4144
- font-size: 14px;
4145
- }
4146
-
4147
- .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-row[data-period="current"] > div {
4148
- flex-direction: column-reverse;
4149
- align-items: flex-start;
4150
- gap: 10px;
4151
- }
4152
-
4153
- .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-row[data-period="current"] strong {
4154
- font-size: clamp(48px, 7vw, 88px);
4155
- line-height: 1;
4156
- }
4157
-
4158
- .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-row[data-period="previous"] strong {
4159
- font-size: clamp(22px, 2.6vw, 30px);
4160
- }
4161
-
4162
- .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-track {
4163
- height: 12px;
4164
- }
4165
-
4166
- .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-change {
4167
- font-size: 14px;
4168
- }
4169
-
4170
- .altertable-about-visual .altertable-comparison-visual[data-emphasis="story"] .altertable-comparison-row[data-period="current"] strong {
4171
- font-size: 36px;
4172
- }
4173
-
4174
- /* src/react/ui/MetricWidget.css */
4175
- .altertable-metric-widget {
4176
- display: flex;
4177
- padding: var(--at-space-md, 16px);
4178
- border: 1px solid var(--at-border, #e3e6e8);
4179
- border-radius: calc(var(--at-radius-surface, 12px) * 1.5);
4180
- corner-shape: squircle;
4181
- background: var(--at-surface, #fff);
4182
- box-shadow: var(--at-shadow-surface, none);
4183
- flex-direction: column;
4184
- min-width: 0;
4185
- }
4186
-
4187
- .altertable-metric-label {
4188
- display: flex;
4189
- justify-content: space-between;
4190
- align-items: center;
4191
- gap: var(--at-space-sm, 10px);
4192
- color: var(--at-muted, #687078);
4193
- font-size: 13px;
4194
- font-weight: 600;
4195
- }
4196
-
4197
- .altertable-metric-value {
4198
- margin: var(--at-space-sm, 8px) 0 2px;
4199
- color: var(--at-text, #202124);
4200
- font-family: var(--at-font-heading, inherit);
4201
- letter-spacing: -.04em;
4202
- font-variant-numeric: tabular-nums;
4203
- font-size: clamp(26px, 3vw, 34px);
4204
- font-weight: 680;
4205
- line-height: 1.08;
4206
- }
4207
-
4208
- .altertable-metric-reading {
4209
- display: flex;
4210
- flex-direction: column;
4211
- justify-content: flex-start;
4212
- align-items: flex-start;
4213
- gap: 4px;
4214
- }
4215
-
4216
- .altertable-metric-trend {
4217
- font-size: 12px;
4218
- }
4219
-
4220
- .altertable-metric-change {
4221
- display: inline-flex;
4222
- color: var(--at-muted, #687078);
4223
- font-variant-numeric: tabular-nums;
4224
- align-items: center;
4225
- gap: 3px;
4226
- }
4227
-
4228
- .altertable-metric-change[data-tone="good"] {
4229
- color: var(--at-accent, #405d47);
4230
- }
4231
-
4232
- .altertable-metric-change[data-tone="bad"] {
4233
- color: var(--at-danger, #b42318);
4234
- }
4235
-
4236
- .altertable-metric-help {
4237
- display: flex;
4238
- flex: none;
4239
- align-items: center;
4240
- }
4241
-
4242
- .altertable-metric-description {
4243
- color: var(--at-muted, #687078);
4244
- font-size: 12px;
4245
- line-height: 1.45;
4246
- }
4247
-
4248
- .altertable-metric-visual {
4249
- margin-top: var(--at-space-sm, 8px);
4250
- min-width: 0;
4251
- }
4252
-
4253
- .altertable-metric-insight {
4254
- margin-top: var(--at-space-sm, 8px);
4255
- color: var(--at-muted, #687078);
4256
- font-size: 12px;
4257
- line-height: 1.45;
4258
- }
4259
-
4260
- .altertable-metric-evidence {
4261
- display: grid;
4262
- gap: 10px;
4263
- min-width: 0;
4264
- }
4265
-
4266
- .altertable-metric-value[data-unavailable] {
4267
- opacity: .6;
4268
- }
4269
-
4270
- /* src/react/ui/SelectableBarChart.css */
4271
- .altertable-selectable-bars {
4272
- min-width: 0;
4273
- }
4274
-
4275
- .altertable-selectable-bars-preview {
4276
- display: flex;
4277
- color: var(--at-accent, #315e40);
4278
- justify-content: space-between;
4279
- align-items: center;
4280
- gap: 12px;
4281
- min-height: 40px;
4282
- margin-top: 18px;
4283
- font-size: 13px;
4284
- }
4285
-
4286
- .altertable-selectable-bars-preview small {
4287
- color: var(--at-muted, #83948a);
4288
- letter-spacing: .04em;
4289
- text-transform: uppercase;
4290
- margin-right: 8px;
4291
- font-size: 11px;
4292
- font-weight: 700;
4293
- }
4294
-
4295
- .altertable-selectable-bars-preview button {
4296
- color: inherit;
4297
- text-decoration: underline;
4298
- text-underline-offset: 3px;
4299
- background: none;
4300
- border: 0;
4301
- flex: none;
4302
- font-size: 12px;
4303
- font-weight: 700;
4304
- }
4305
-
4306
- .altertable-selectable-bars-scroll {
4307
- display: flex;
4308
- overflow-x: auto;
4309
- align-items: stretch;
4310
- gap: 9px;
4311
- width: 100%;
4312
- min-width: 0;
4313
- height: 260px;
4314
- margin: 12px 2px 14px;
4315
- }
4316
-
4317
- .altertable-selectable-bars-item {
4318
- display: flex;
4319
- color: var(--at-muted, #7f8c83);
4320
- background: none;
4321
- border: 0;
4322
- flex-direction: column;
4323
- flex: 1;
4324
- align-items: center;
4325
- min-width: 36px;
4326
- padding: 0;
4327
- }
4328
-
4329
- .altertable-selectable-bars-item:focus:not(:focus-visible) {
4330
- outline: none;
4331
- }
4332
-
4333
- .altertable-selectable-bars-item:focus-visible {
4334
- outline: var(--at-focus-outline, 1px solid #687078);
4335
- outline-offset: var(--at-focus-ring-offset, 2px);
4336
- border-radius: 4px;
4337
- }
4338
-
4339
- .altertable-selectable-bars-area {
4340
- display: flex;
4341
- border-bottom: 1px solid var(--at-border, #dae4dd);
4342
- justify-content: center;
4343
- align-items: end;
4344
- width: 100%;
4345
- height: 220px;
4346
- }
4347
-
4348
- .altertable-selectable-bars-bar {
4349
- background: #a8c9b3;
4350
- border-radius: 5px 5px 0 0;
4351
- width: min(30px, 76%);
4352
- transition: height .25s, background .2s;
4353
- }
4354
-
4355
- .altertable-selectable-bars-item:-webkit-any(:hover, [aria-pressed="true"]) .altertable-selectable-bars-bar {
4356
- background: var(--at-accent, #356d48);
4357
- }
4358
-
4359
- .altertable-selectable-bars-item:-moz-any(:hover, [aria-pressed="true"]) .altertable-selectable-bars-bar {
4360
- background: var(--at-accent, #356d48);
4361
- }
4362
-
4363
- .altertable-selectable-bars-item:is(:hover, [aria-pressed="true"]) .altertable-selectable-bars-bar {
4364
- background: var(--at-accent, #356d48);
4365
- }
4366
-
4367
- .altertable-selectable-bars-label {
4368
- white-space: nowrap;
4369
- padding-top: 8px;
4370
- font-size: 11px;
4371
- }
4372
-
4373
- .altertable-selectable-bars-help {
4374
- border-top: 1px solid var(--at-border, #edf1ee);
4375
- color: var(--at-muted, #8a988e);
4376
- margin: 0;
4377
- padding-top: 12px;
4378
- font-size: 12px;
4379
- }
4380
-
4381
- /* src/react/ui/RefreshRegion.css */
4382
- .altertable-refresh-content {
4383
- transition: opacity .12s;
4384
- }
4385
-
4386
- .altertable-refresh-content[data-refreshing="true"] {
4387
- opacity: .55;
4388
- transition: opacity .24s .3s;
4389
- }
4390
-
4391
- @media (prefers-reduced-motion: reduce) {
4392
- .altertable-refresh-content, .altertable-refresh-content[data-refreshing="true"] {
4393
- transition: none;
4394
- }
4395
- }
4396
-
4397
- /* src/react/ui/UpdatedAt.css */
4398
- .altertable-updated-at {
4399
- color: var(--at-muted, #687078);
4400
- font: 12px / 1.4 var(--at-font, ui-sans-serif, system-ui, sans-serif);
4401
- cursor: pointer;
4402
- background: none;
4403
- border: 0;
4404
- align-self: flex-start;
4405
- width: -moz-fit-content;
4406
- width: fit-content;
4407
- padding: 0;
4408
- }
4409
-
4410
- .altertable-updated-at:hover {
4411
- color: var(--at-text, #202124);
4412
- }
4413
-
4414
- .altertable-updated-at:focus-visible {
4415
- outline: var(--at-focus-outline, 1px solid #687078);
4416
- outline-offset: var(--at-focus-ring-offset, 2px);
4417
- }
4418
-
4419
- /* src/react/ui/data-identifiers.css */
4420
- .altertable-data-identifier {
4421
- border: 1px solid color-mix(in srgb, var(--at-border, #e3e6e8) 65%, var(--at-surface, #fff));
4422
- background: color-mix(in srgb, var(--at-subtle, #f6f7f7) 65%, var(--at-surface, #fff));
4423
- color: var(--at-text, #202124);
4424
- font-size: .85em;
4425
- font-weight: 450;
4426
- line-height: inherit;
4427
- letter-spacing: -.01em;
4428
- overflow-wrap: anywhere;
4429
- box-decoration-break: clone;
4430
- -webkit-box-decoration-break: clone;
4431
- border-radius: .3em;
4432
- padding: .06em .24em .08em;
4433
- }
4434
-
4435
- .altertable-data-identifier-path {
4436
- color: var(--at-muted, #687078);
4437
- }
4438
-
4439
- .altertable-data-identifier-name {
4440
- font-weight: 550;
4441
- }
4442
-
4443
- /* src/react/ui/GlossaryDefinition.css */
4444
- .altertable-glossary-definition-trigger {
4445
- display: inline;
4446
- color: inherit;
4447
- font: inherit;
4448
- font-weight: inherit;
4449
- text-align: inherit;
4450
- text-decoration: underline dotted var(--at-muted, #687078);
4451
- text-decoration-thickness: 1px;
4452
- text-underline-offset: .2em;
4453
- cursor: help;
4454
- background: none;
4455
- border: 0;
4456
- padding: 0;
4457
- }
4458
-
4459
- .altertable-glossary-definition-trigger:hover, .altertable-glossary-definition-trigger[data-open="true"] {
4460
- text-decoration-color: var(--at-text, #202124);
4461
- }
4462
-
4463
- .altertable-glossary-definition-trigger:focus-visible {
4464
- outline: var(--at-focus-outline, 1px solid #687078);
4465
- outline-offset: var(--at-focus-ring-offset, 2px);
4466
- border-radius: 2px;
4467
- }
4468
-
4469
- .altertable-glossary-definition-popover {
4470
- width: min(320px, 100vw - 24px);
4471
- }
4472
-
4473
- .altertable-glossary-definition-popover > strong {
4474
- display: block;
4475
- margin-bottom: 4px;
4476
- font-size: 13px;
4477
- font-weight: 650;
4478
- }