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