@lensui/lens-table 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css ADDED
@@ -0,0 +1,2074 @@
1
+ /* src/style.css */
2
+ :root {
3
+ --rvg-color-bg: #fff;
4
+ --rvg-color-header-bg: #f5f6f7;
5
+ --rvg-color-grid: #e3e6e8;
6
+ --rvg-color-text: #202124;
7
+ --rvg-color-muted: #5f6368;
8
+ --rvg-color-subtle: #80868b;
9
+ --rvg-color-icon: #9aa0a6;
10
+ --rvg-color-border: #d9dde1;
11
+ --rvg-color-border-strong: #b8bec4;
12
+ --rvg-color-primary: #1677ff;
13
+ --rvg-color-primary-hover: #0f6fe8;
14
+ --rvg-color-primary-active: #0958d9;
15
+ --rvg-color-primary-soft: #edf4ff;
16
+ --rvg-color-selection-fill: #edf4ff;
17
+ --rvg-color-axis-selection-fill: #e8f2ff;
18
+ --rvg-color-range-fill: #e8f1ff;
19
+ --rvg-color-row-hover-fill: #f6f9fc;
20
+ --rvg-color-hover: #f1f4f8;
21
+ --rvg-color-hover-muted: #f1f3f4;
22
+ --rvg-color-edited-fill: #fff1b8;
23
+ --rvg-color-inserted-fill: #c8ead4;
24
+ --rvg-color-stripe: #fafbfc;
25
+ --rvg-color-danger: #d93025;
26
+ --rvg-color-tooltip-bg: #2f3033;
27
+ --rvg-shadow-popover: 0 6px 18px rgba(5, 5, 5, 0.16);
28
+ --rvg-shadow-soft: 0 6px 18px rgba(5, 5, 5, 0.14);
29
+ }
30
+ .rvg-root {
31
+ position: relative;
32
+ overflow: hidden;
33
+ border: 0;
34
+ border-radius: 0;
35
+ background: var(--rvg-color-bg);
36
+ color: var(--rvg-color-text);
37
+ box-sizing: border-box;
38
+ overscroll-behavior: none;
39
+ }
40
+ .rvg-root.is-inserting,
41
+ .rvg-root.is-inserting *,
42
+ .rvg-root.is-deleting,
43
+ .rvg-root.is-deleting * {
44
+ cursor: progress !important;
45
+ }
46
+ .rvg-root.is-inserting .rvg-scroller {
47
+ overflow: hidden;
48
+ touch-action: none;
49
+ }
50
+ .rvg-scroller {
51
+ position: absolute;
52
+ inset: 0;
53
+ overflow: auto;
54
+ outline: none;
55
+ overscroll-behavior: none;
56
+ overscroll-behavior-x: none;
57
+ touch-action: pan-x pan-y;
58
+ -webkit-overflow-scrolling: touch;
59
+ scrollbar-gutter: stable;
60
+ scrollbar-color: #92979c transparent;
61
+ }
62
+ .rvg-scroller.is-context-menu-open {
63
+ overflow: hidden;
64
+ touch-action: none;
65
+ }
66
+ .rvg-scroller::-webkit-scrollbar-track,
67
+ .rvg-scroller::-webkit-scrollbar-corner {
68
+ background: transparent;
69
+ }
70
+ .rvg-scroller::-webkit-scrollbar-thumb {
71
+ background: #92979c;
72
+ border-radius: 4px;
73
+ }
74
+ .rvg-spacer {
75
+ pointer-events: none;
76
+ }
77
+ .rvg-canvas {
78
+ position: sticky;
79
+ z-index: 1;
80
+ left: 0;
81
+ top: 0;
82
+ display: block;
83
+ cursor: default;
84
+ }
85
+ .rvg-text-layer {
86
+ position: sticky;
87
+ z-index: 2;
88
+ top: 0;
89
+ left: 0;
90
+ overflow: hidden;
91
+ pointer-events: none;
92
+ }
93
+ .rvg-text-scroll-clip,
94
+ .rvg-body-text-clip {
95
+ position: absolute;
96
+ top: 0;
97
+ bottom: 0;
98
+ overflow: hidden;
99
+ pointer-events: none;
100
+ }
101
+ .rvg-text-scroll-clip {
102
+ position: absolute;
103
+ }
104
+ .rvg-text-scroll-content {
105
+ position: absolute;
106
+ top: 0;
107
+ bottom: 0;
108
+ will-change: transform;
109
+ pointer-events: none;
110
+ }
111
+ .rvg-text-scroll-content > .rvg-header-title {
112
+ z-index: 2;
113
+ }
114
+ .rvg-body-text-clip {
115
+ right: 0;
116
+ left: 0;
117
+ }
118
+ .rvg-cell-text,
119
+ .rvg-header-title {
120
+ position: absolute;
121
+ display: flex;
122
+ align-items: center;
123
+ min-width: 0;
124
+ padding: 0 10px;
125
+ overflow: hidden;
126
+ color: var(--rvg-color-text);
127
+ font:
128
+ 13px Inter,
129
+ ui-sans-serif,
130
+ system-ui,
131
+ sans-serif;
132
+ white-space: nowrap;
133
+ user-select: text;
134
+ pointer-events: auto;
135
+ cursor: text;
136
+ }
137
+ .rvg-cell-text {
138
+ transition: transform 140ms ease, opacity 100ms ease;
139
+ }
140
+ .rvg-row-drop-settling .rvg-cell-text,
141
+ .rvg-row-drop-settling .rvg-row-drag-icon,
142
+ .rvg-row-drop-settling .rvg-row-selection-icon {
143
+ transition: none;
144
+ }
145
+ .rvg-cell-text > span,
146
+ .rvg-header-title > span {
147
+ min-width: 0;
148
+ overflow: hidden;
149
+ text-overflow: ellipsis;
150
+ white-space: nowrap;
151
+ user-select: text;
152
+ }
153
+ .rvg-row-drag-icon {
154
+ position: absolute;
155
+ display: grid;
156
+ place-items: center;
157
+ pointer-events: none;
158
+ transition: transform 140ms ease, opacity 100ms ease;
159
+ }
160
+ .rvg-row-drag-icon svg {
161
+ display: block;
162
+ width: 16px;
163
+ height: 16px;
164
+ overflow: visible;
165
+ fill: var(--rvg-color-icon);
166
+ }
167
+ .rvg-cell-render {
168
+ position: absolute;
169
+ z-index: 1;
170
+ display: flex;
171
+ min-width: 0;
172
+ padding: 0 10px;
173
+ align-items: center;
174
+ overflow: hidden;
175
+ color: var(--rvg-color-text);
176
+ font:
177
+ 13px Inter,
178
+ ui-sans-serif,
179
+ system-ui,
180
+ sans-serif;
181
+ white-space: nowrap;
182
+ pointer-events: none;
183
+ box-sizing: border-box;
184
+ transition: transform 140ms ease, opacity 100ms ease;
185
+ }
186
+ .rvg-cell-render > * {
187
+ min-width: 0;
188
+ overflow: hidden;
189
+ text-overflow: ellipsis;
190
+ }
191
+ .rvg-summary-row {
192
+ position: absolute;
193
+ z-index: 4;
194
+ right: 0;
195
+ left: 0;
196
+ overflow: hidden;
197
+ background: #fbfcfd;
198
+ pointer-events: none;
199
+ box-sizing: border-box;
200
+ }
201
+ .rvg-summary-row::before {
202
+ position: absolute;
203
+ z-index: 3;
204
+ inset: 0;
205
+ border-right: 1px solid var(--rvg-color-grid);
206
+ border-left: 1px solid var(--rvg-color-grid);
207
+ content: "";
208
+ pointer-events: none;
209
+ }
210
+ .rvg-summary-row.is-vertical-borderless::before {
211
+ border-right: 0;
212
+ border-left: 0;
213
+ }
214
+ .rvg-summary-row.is-bottom {
215
+ bottom: 0;
216
+ border-top: 1px solid var(--rvg-color-grid);
217
+ border-bottom: 1px solid var(--rvg-color-grid);
218
+ }
219
+ .rvg-summary-row.is-top {
220
+ border-bottom: 1px solid var(--rvg-color-grid);
221
+ }
222
+ .rvg-summary-scroll-clip {
223
+ position: absolute;
224
+ top: 0;
225
+ bottom: 0;
226
+ overflow: hidden;
227
+ }
228
+ .rvg-summary-scroll-content {
229
+ position: absolute;
230
+ top: 0;
231
+ bottom: 0;
232
+ will-change: transform;
233
+ }
234
+ .rvg-summary-fixed-layer {
235
+ position: absolute;
236
+ inset: 0;
237
+ }
238
+ .rvg-summary-fixed-shadow {
239
+ position: absolute;
240
+ z-index: 2;
241
+ top: 0;
242
+ bottom: 0;
243
+ width: 10px;
244
+ pointer-events: none;
245
+ }
246
+ .rvg-summary-fixed-shadow.is-left {
247
+ background:
248
+ linear-gradient(
249
+ 90deg,
250
+ rgba(5, 5, 5, 0.06),
251
+ transparent);
252
+ }
253
+ .rvg-summary-fixed-shadow.is-right {
254
+ background:
255
+ linear-gradient(
256
+ 90deg,
257
+ transparent,
258
+ rgba(5, 5, 5, 0.06));
259
+ }
260
+ .rvg-summary-fixed-border {
261
+ position: absolute;
262
+ z-index: 3;
263
+ top: 0;
264
+ bottom: 0;
265
+ width: 1px;
266
+ background: var(--rvg-color-grid);
267
+ pointer-events: none;
268
+ }
269
+ .rvg-summary-cell {
270
+ position: absolute;
271
+ top: 0;
272
+ bottom: 0;
273
+ display: flex;
274
+ min-width: 0;
275
+ padding: 0 10px;
276
+ align-items: center;
277
+ overflow: hidden;
278
+ border-right: 1px solid var(--rvg-color-grid);
279
+ color: var(--rvg-color-muted);
280
+ font:
281
+ 600 13px Inter,
282
+ ui-sans-serif,
283
+ system-ui,
284
+ sans-serif;
285
+ white-space: nowrap;
286
+ text-overflow: ellipsis;
287
+ box-sizing: border-box;
288
+ }
289
+ .rvg-summary-cell.is-borderless {
290
+ border-right: 0;
291
+ }
292
+ .rvg-summary-cell.is-summary {
293
+ color: var(--rvg-color-text);
294
+ }
295
+ .rvg-summary-cell.is-utility {
296
+ justify-content: center;
297
+ color: var(--rvg-color-muted);
298
+ }
299
+ .rvg-summary-skeleton {
300
+ position: relative;
301
+ display: block;
302
+ width: min(72px, 70%);
303
+ height: 7px;
304
+ overflow: hidden;
305
+ border-radius: 2px;
306
+ background: #e2e6e9;
307
+ }
308
+ .rvg-summary-skeleton::after {
309
+ position: absolute;
310
+ inset: 0;
311
+ transform: translateX(-120%);
312
+ background:
313
+ linear-gradient(
314
+ 90deg,
315
+ transparent,
316
+ #fff,
317
+ transparent);
318
+ content: "";
319
+ animation: rvg-loading-shimmer 1.35s ease-in-out infinite;
320
+ }
321
+ .rvg-tag {
322
+ display: inline-flex;
323
+ max-width: 100%;
324
+ height: 22px;
325
+ padding: 0 8px;
326
+ align-items: center;
327
+ border-radius: 999px;
328
+ background: var(--rvg-color-hover-muted);
329
+ color: var(--rvg-color-muted);
330
+ font:
331
+ 12px Inter,
332
+ ui-sans-serif,
333
+ system-ui,
334
+ sans-serif;
335
+ line-height: 22px;
336
+ }
337
+ .rvg-tag.is-success {
338
+ background: #e6f4ea;
339
+ color: #188038;
340
+ }
341
+ .rvg-tag.is-warning {
342
+ background: #fef7e0;
343
+ color: #b06000;
344
+ }
345
+ .rvg-tag.is-danger {
346
+ background: #fce8e6;
347
+ color: #d93025;
348
+ }
349
+ .rvg-row-selection-icon,
350
+ .rvg-header-selection-icon {
351
+ position: absolute;
352
+ display: grid;
353
+ place-items: center;
354
+ pointer-events: none;
355
+ }
356
+ .rvg-row-selection-icon {
357
+ transition: transform 140ms ease, opacity 100ms ease;
358
+ }
359
+ .rvg-selection-svg {
360
+ display: block;
361
+ width: 16px;
362
+ height: 16px;
363
+ overflow: visible;
364
+ }
365
+ .rvg-selection-outline {
366
+ fill: var(--rvg-color-bg);
367
+ stroke: var(--rvg-color-border-strong);
368
+ stroke-width: 1;
369
+ vector-effect: non-scaling-stroke;
370
+ }
371
+ .rvg-selection-svg.is-active .rvg-selection-outline {
372
+ fill: var(--rvg-color-primary);
373
+ stroke: var(--rvg-color-primary);
374
+ }
375
+ .rvg-radio-svg.is-active .rvg-selection-outline {
376
+ fill: var(--rvg-color-bg);
377
+ }
378
+ .rvg-selection-mark {
379
+ fill: none;
380
+ stroke: var(--rvg-color-bg);
381
+ stroke-width: 1.75;
382
+ stroke-linecap: round;
383
+ stroke-linejoin: round;
384
+ vector-effect: non-scaling-stroke;
385
+ }
386
+ .rvg-selection-dot {
387
+ fill: var(--rvg-color-primary);
388
+ }
389
+ .rvg-selection-focus {
390
+ position: absolute;
391
+ z-index: 4;
392
+ border: 2px solid var(--rvg-color-primary);
393
+ box-sizing: border-box;
394
+ pointer-events: none;
395
+ }
396
+ .rvg-header-title {
397
+ z-index: 1;
398
+ color: var(--rvg-color-muted);
399
+ font-weight: 600;
400
+ }
401
+ .rvg-header-icons {
402
+ position: absolute;
403
+ z-index: 2;
404
+ top: 0;
405
+ right: 0;
406
+ left: 0;
407
+ overflow: hidden;
408
+ pointer-events: none;
409
+ }
410
+ .rvg-header-scroll-clip {
411
+ position: absolute;
412
+ top: 0;
413
+ bottom: 0;
414
+ overflow: hidden;
415
+ }
416
+ .rvg-header-icon-layer {
417
+ position: absolute;
418
+ inset: 0;
419
+ }
420
+ .rvg-header-icon-layer-scroll {
421
+ right: auto;
422
+ will-change: transform;
423
+ }
424
+ .rvg-header-icon {
425
+ position: absolute;
426
+ width: 14px;
427
+ height: 14px;
428
+ overflow: visible;
429
+ color: var(--rvg-color-icon);
430
+ }
431
+ .rvg-header-icon.is-hovered {
432
+ color: var(--rvg-color-muted);
433
+ }
434
+ .rvg-root.is-initial-loading .rvg-header-icon {
435
+ color: #d6dbe0;
436
+ animation: rvg-loading-icon-pulse 1.15s ease-in-out infinite alternate;
437
+ }
438
+ .rvg-header-icon path,
439
+ .rvg-header-icon circle {
440
+ fill: currentColor;
441
+ }
442
+ .rvg-header-icon path.is-active,
443
+ .rvg-header-icon.is-active {
444
+ color: var(--rvg-color-primary);
445
+ }
446
+ .rvg-header-search-icon {
447
+ fill: none;
448
+ stroke: currentColor;
449
+ stroke-width: 1.5;
450
+ stroke-linecap: round;
451
+ stroke-linejoin: round;
452
+ }
453
+ .rvg-header-search-icon path,
454
+ .rvg-header-search-icon circle {
455
+ fill: none;
456
+ }
457
+ .rvg-header-tooltip,
458
+ .rvg-cell-tooltip {
459
+ position: absolute;
460
+ z-index: 5;
461
+ max-width: 320px;
462
+ padding: 4px 7px;
463
+ transform: translateY(-50%);
464
+ overflow: visible;
465
+ border-radius: 3px;
466
+ background: var(--rvg-color-tooltip-bg);
467
+ box-shadow: 0 2px 8px rgba(32, 33, 36, 0.18);
468
+ color: var(--rvg-color-bg);
469
+ font:
470
+ 12px/18px Inter,
471
+ ui-sans-serif,
472
+ system-ui,
473
+ sans-serif;
474
+ white-space: nowrap;
475
+ text-overflow: ellipsis;
476
+ pointer-events: none;
477
+ animation: rvg-tooltip-in 120ms ease-out both;
478
+ }
479
+ .rvg-header-tooltip::after,
480
+ .rvg-cell-tooltip::after {
481
+ position: absolute;
482
+ top: 50%;
483
+ width: 0;
484
+ height: 0;
485
+ content: "";
486
+ transform: translateY(-50%);
487
+ border-top: 5px solid transparent;
488
+ border-bottom: 5px solid transparent;
489
+ }
490
+ .rvg-header-tooltip.is-right::after,
491
+ .rvg-cell-tooltip.is-right::after {
492
+ left: -4px;
493
+ border-right: 5px solid var(--rvg-color-tooltip-bg);
494
+ }
495
+ .rvg-header-tooltip.is-left,
496
+ .rvg-cell-tooltip.is-left {
497
+ transform: translate(-100%, -50%);
498
+ }
499
+ .rvg-header-tooltip.is-left::after,
500
+ .rvg-cell-tooltip.is-left::after {
501
+ right: -4px;
502
+ border-left: 5px solid var(--rvg-color-tooltip-bg);
503
+ }
504
+ .rvg-cell-tooltip.is-annotation::after {
505
+ display: none;
506
+ }
507
+ .rvg-cell-tooltip.is-annotation {
508
+ z-index: 7;
509
+ width: max-content;
510
+ max-width: 240px;
511
+ padding: 7px 9px;
512
+ transform: translateY(-50%);
513
+ overflow: visible;
514
+ border-radius: 4px;
515
+ box-shadow: 0 4px 12px rgba(32, 33, 36, 0.2);
516
+ line-height: 18px;
517
+ white-space: pre-wrap;
518
+ overflow-wrap: anywhere;
519
+ text-overflow: clip;
520
+ }
521
+ @keyframes rvg-tooltip-in {
522
+ from {
523
+ opacity: 0;
524
+ filter: blur(1px);
525
+ }
526
+ to {
527
+ opacity: 1;
528
+ filter: blur(0);
529
+ }
530
+ }
531
+ .rvg-column-guide {
532
+ position: absolute;
533
+ z-index: 3;
534
+ top: 0;
535
+ bottom: 0;
536
+ left: -1px;
537
+ display: none;
538
+ width: 2px;
539
+ pointer-events: none;
540
+ background: var(--rvg-color-primary);
541
+ }
542
+ .rvg-row-guide {
543
+ position: absolute;
544
+ z-index: 3;
545
+ top: -1px;
546
+ right: 0;
547
+ left: 0;
548
+ display: none;
549
+ height: 2px;
550
+ pointer-events: none;
551
+ background: var(--rvg-color-primary);
552
+ }
553
+ .rvg-range-handle {
554
+ position: absolute;
555
+ z-index: 6;
556
+ width: 8px;
557
+ height: 8px;
558
+ transform: translate(-100%, -100%);
559
+ border: 0;
560
+ background: var(--rvg-color-primary);
561
+ box-shadow: none;
562
+ cursor: crosshair;
563
+ touch-action: none;
564
+ }
565
+ .rvg-filter {
566
+ position: absolute;
567
+ z-index: 9;
568
+ width: 220px;
569
+ padding: 8px;
570
+ border: 1px solid var(--rvg-color-border);
571
+ background: var(--rvg-color-bg);
572
+ box-shadow: var(--rvg-shadow-soft);
573
+ }
574
+ .rvg-filter input {
575
+ width: 100%;
576
+ height: 32px;
577
+ padding: 0 9px;
578
+ border: 1px solid var(--rvg-color-border-strong);
579
+ border-radius: 3px;
580
+ outline: none;
581
+ color: var(--rvg-color-text);
582
+ font:
583
+ 13px Inter,
584
+ ui-sans-serif,
585
+ system-ui,
586
+ sans-serif;
587
+ }
588
+ .rvg-filter input:focus {
589
+ border-color: var(--rvg-color-primary);
590
+ box-shadow: 0 0 0 1px var(--rvg-color-primary);
591
+ }
592
+ .rvg-filter-actions {
593
+ display: flex;
594
+ justify-content: flex-end;
595
+ gap: 8px;
596
+ margin-top: 8px;
597
+ }
598
+ .rvg-filter-actions button {
599
+ height: 28px;
600
+ padding: 0 12px;
601
+ border: 1px solid #c8cdd2;
602
+ border-radius: 3px;
603
+ background: var(--rvg-color-bg);
604
+ color: #3c4043;
605
+ font:
606
+ 13px Inter,
607
+ ui-sans-serif,
608
+ system-ui,
609
+ sans-serif;
610
+ cursor: pointer;
611
+ }
612
+ .rvg-filter-actions .rvg-filter-confirm {
613
+ border-color: var(--rvg-color-primary);
614
+ background: var(--rvg-color-primary);
615
+ color: var(--rvg-color-bg);
616
+ }
617
+ .rvg-context-menu {
618
+ position: absolute;
619
+ z-index: 8;
620
+ width: 180px;
621
+ padding: 4px 0;
622
+ border: 1px solid var(--rvg-color-border);
623
+ border-radius: 6px;
624
+ background: var(--rvg-color-bg);
625
+ box-shadow: var(--rvg-shadow-popover);
626
+ }
627
+ .rvg-context-menu button {
628
+ display: flex;
629
+ width: 100%;
630
+ height: 30px;
631
+ padding: 0 12px;
632
+ align-items: center;
633
+ gap: 8px;
634
+ overflow: hidden;
635
+ border: 0;
636
+ background: transparent;
637
+ color: var(--rvg-color-text);
638
+ font:
639
+ 13px Inter,
640
+ ui-sans-serif,
641
+ system-ui,
642
+ sans-serif;
643
+ text-align: left;
644
+ white-space: nowrap;
645
+ cursor: pointer;
646
+ }
647
+ .rvg-context-menu button:hover:not(:disabled) {
648
+ background: var(--rvg-color-hover-muted);
649
+ }
650
+ .rvg-context-menu button:disabled {
651
+ color: #bdc1c6;
652
+ cursor: default;
653
+ }
654
+ .rvg-context-menu .rvg-context-danger {
655
+ color: var(--rvg-color-danger);
656
+ }
657
+ .rvg-context-menu-icon {
658
+ display: grid;
659
+ flex: 0 0 14px;
660
+ width: 14px;
661
+ height: 14px;
662
+ place-items: center;
663
+ }
664
+ .rvg-context-menu-icon svg {
665
+ width: 14px;
666
+ height: 14px;
667
+ }
668
+ .rvg-context-menu-svg {
669
+ fill: none;
670
+ stroke: currentColor;
671
+ stroke-width: 1.45;
672
+ stroke-linecap: round;
673
+ stroke-linejoin: round;
674
+ }
675
+ .rvg-context-menu-label {
676
+ min-width: 0;
677
+ overflow: hidden;
678
+ text-overflow: ellipsis;
679
+ }
680
+ .rvg-context-menu-shortcut {
681
+ margin-left: auto;
682
+ color: var(--rvg-color-icon);
683
+ font-size: 11px;
684
+ }
685
+ .rvg-context-submenu {
686
+ position: relative;
687
+ }
688
+ .rvg-context-submenu > button > svg {
689
+ width: 14px;
690
+ height: 14px;
691
+ margin-left: auto;
692
+ fill: none;
693
+ stroke: var(--rvg-color-icon);
694
+ stroke-width: 1.5;
695
+ stroke-linecap: round;
696
+ stroke-linejoin: round;
697
+ }
698
+ .rvg-context-submenu-panel {
699
+ position: absolute;
700
+ z-index: 1;
701
+ top: -5px;
702
+ left: calc(100% - 4px);
703
+ display: none;
704
+ min-width: 180px;
705
+ padding: 4px 0;
706
+ border: 1px solid var(--rvg-color-border);
707
+ border-radius: 6px;
708
+ background: var(--rvg-color-bg);
709
+ box-shadow: var(--rvg-shadow-popover);
710
+ }
711
+ .rvg-context-submenu:hover > .rvg-context-submenu-panel {
712
+ display: block;
713
+ }
714
+ .rvg-annotation-submenu {
715
+ position: relative;
716
+ }
717
+ .rvg-context-menu .rvg-context-annotation-trigger {
718
+ display: flex;
719
+ align-items: center;
720
+ justify-content: flex-start;
721
+ }
722
+ .rvg-context-menu .rvg-context-annotation-trigger > svg {
723
+ margin-left: auto;
724
+ }
725
+ .rvg-context-annotation-trigger svg {
726
+ width: 14px;
727
+ height: 14px;
728
+ fill: none;
729
+ stroke: var(--rvg-color-icon);
730
+ stroke-width: 1.5;
731
+ stroke-linecap: round;
732
+ stroke-linejoin: round;
733
+ transition: transform 140ms ease, stroke 120ms ease;
734
+ }
735
+ .rvg-context-annotation-trigger .rvg-context-menu-icon svg {
736
+ stroke: currentColor;
737
+ }
738
+ .rvg-context-annotation-trigger:hover svg {
739
+ stroke: var(--rvg-color-muted);
740
+ }
741
+ .rvg-context-annotation-trigger:hover .rvg-context-menu-icon svg {
742
+ stroke: currentColor;
743
+ }
744
+ .rvg-annotation-panel {
745
+ position: absolute;
746
+ z-index: 1;
747
+ top: -5px;
748
+ left: calc(100% - 4px);
749
+ width: 220px;
750
+ padding: 9px 10px 10px;
751
+ border: 1px solid var(--rvg-color-border);
752
+ border-radius: 6px;
753
+ background: var(--rvg-color-bg);
754
+ box-shadow: var(--rvg-shadow-popover);
755
+ }
756
+ .rvg-annotation-panel.is-left-down,
757
+ .rvg-annotation-panel.is-left-up {
758
+ right: calc(100% - 4px);
759
+ left: auto;
760
+ }
761
+ .rvg-annotation-panel.is-right-up,
762
+ .rvg-annotation-panel.is-left-up {
763
+ top: auto;
764
+ bottom: -5px;
765
+ }
766
+ .rvg-annotation-types {
767
+ position: relative;
768
+ display: grid;
769
+ grid-template-columns: 1fr 1fr;
770
+ gap: 2px;
771
+ padding: 2px;
772
+ border-radius: 4px;
773
+ background: var(--rvg-color-hover-muted);
774
+ }
775
+ .rvg-annotation-types::before {
776
+ position: absolute;
777
+ top: 2px;
778
+ bottom: 2px;
779
+ left: 2px;
780
+ width: calc((100% - 6px) / 2);
781
+ border-radius: 3px;
782
+ background: var(--rvg-color-bg);
783
+ box-shadow: 0 1px 3px rgba(32, 33, 36, 0.14);
784
+ content: "";
785
+ transform: translateX(0);
786
+ transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
787
+ }
788
+ .rvg-annotation-types.is-corner::before {
789
+ transform: translateX(calc(100% + 2px));
790
+ }
791
+ .rvg-context-menu .rvg-annotation-types button {
792
+ position: relative;
793
+ z-index: 1;
794
+ height: 25px;
795
+ padding: 0;
796
+ justify-content: center;
797
+ border-radius: 3px;
798
+ background: transparent;
799
+ color: var(--rvg-color-muted);
800
+ font-size: 12px;
801
+ text-align: center;
802
+ transition: color 180ms ease;
803
+ }
804
+ .rvg-context-menu .rvg-annotation-types button:hover {
805
+ background: transparent;
806
+ color: #3c4043;
807
+ }
808
+ .rvg-context-menu .rvg-annotation-types button.is-active {
809
+ background: transparent;
810
+ color: var(--rvg-color-primary);
811
+ box-shadow: none;
812
+ }
813
+ .rvg-annotation-colors {
814
+ display: grid;
815
+ grid-template-columns: repeat(5, 12px);
816
+ justify-content: space-between;
817
+ gap: 10px;
818
+ margin-top: 10px;
819
+ padding: 3px 5px;
820
+ }
821
+ .rvg-context-menu .rvg-annotation-colors button {
822
+ width: 12px;
823
+ height: 12px;
824
+ padding: 0;
825
+ border: 0;
826
+ border-radius: 50%;
827
+ box-shadow: none;
828
+ transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
829
+ will-change: transform;
830
+ }
831
+ .rvg-context-menu .rvg-annotation-colors button.is-active {
832
+ transform: scale(0.9);
833
+ box-shadow: 0 0 0 2.5px var(--rvg-color-bg), 0 0 0 4px var(--annotation-color);
834
+ }
835
+ .rvg-annotation-content {
836
+ display: block;
837
+ width: 100%;
838
+ height: 64px;
839
+ margin-top: 10px;
840
+ padding: 7px 8px;
841
+ resize: none;
842
+ border: 1px solid var(--rvg-color-border);
843
+ border-radius: 4px;
844
+ outline: none;
845
+ background: var(--rvg-color-bg);
846
+ color: var(--rvg-color-text);
847
+ font:
848
+ 12px/18px Inter,
849
+ ui-sans-serif,
850
+ system-ui,
851
+ sans-serif;
852
+ }
853
+ .rvg-annotation-content::placeholder {
854
+ color: var(--rvg-color-icon);
855
+ }
856
+ .rvg-annotation-content:focus {
857
+ border-color: var(--rvg-color-primary);
858
+ box-shadow: 0 0 0 1px var(--rvg-color-primary);
859
+ }
860
+ .rvg-annotation-actions {
861
+ display: flex;
862
+ height: 28px;
863
+ margin-top: 8px;
864
+ align-items: center;
865
+ justify-content: space-between;
866
+ }
867
+ .rvg-annotation-actions span {
868
+ color: var(--rvg-color-icon);
869
+ font:
870
+ 11px Inter,
871
+ ui-sans-serif,
872
+ system-ui,
873
+ sans-serif;
874
+ }
875
+ .rvg-context-menu .rvg-annotation-actions button {
876
+ width: auto;
877
+ height: 26px;
878
+ padding: 0 12px;
879
+ border-radius: 3px;
880
+ background: var(--rvg-color-primary);
881
+ color: var(--rvg-color-bg);
882
+ font-size: 12px;
883
+ text-align: center;
884
+ }
885
+ .rvg-context-menu .rvg-annotation-actions button:hover {
886
+ background: var(--rvg-color-primary-active);
887
+ }
888
+ .rvg-context-separator {
889
+ height: 1px;
890
+ margin: 4px 0;
891
+ background: #e8eaed;
892
+ }
893
+ .rvg-context-insert {
894
+ display: grid;
895
+ height: 30px;
896
+ padding-right: 8px;
897
+ grid-template-columns: minmax(82px, 1fr) 42px 14px;
898
+ column-gap: 2px;
899
+ align-items: center;
900
+ color: #5a5f63;
901
+ font:
902
+ 12px Inter,
903
+ ui-sans-serif,
904
+ system-ui,
905
+ sans-serif;
906
+ }
907
+ .rvg-context-insert:hover {
908
+ background: var(--rvg-color-hover-muted);
909
+ }
910
+ .rvg-context-insert button {
911
+ width: auto;
912
+ padding-right: 6px;
913
+ }
914
+ .rvg-context-insert button:hover:not(:disabled) {
915
+ background: transparent;
916
+ }
917
+ .rvg-context-insert input {
918
+ width: 42px;
919
+ height: 22px;
920
+ padding: 0 2px;
921
+ border: 1px solid #c8cdd2;
922
+ border-radius: 3px;
923
+ outline: none;
924
+ color: var(--rvg-color-text);
925
+ font:
926
+ 12px Inter,
927
+ ui-sans-serif,
928
+ system-ui,
929
+ sans-serif;
930
+ text-align: center;
931
+ }
932
+ .rvg-context-insert input:focus {
933
+ border-color: var(--rvg-color-primary);
934
+ }
935
+ .rvg-context-insert > span {
936
+ margin-left: 0;
937
+ }
938
+ .rvg-confirm-backdrop {
939
+ position: absolute;
940
+ z-index: 10;
941
+ inset: 0;
942
+ display: grid;
943
+ place-items: center;
944
+ background: rgba(213, 214, 216, 0.4);
945
+ }
946
+ .rvg-confirm {
947
+ width: min(320px, calc(100% - 32px));
948
+ padding: 18px;
949
+ border: 1px solid var(--rvg-color-border);
950
+ background: var(--rvg-color-bg);
951
+ box-shadow: 0 8px 24px rgba(5, 5, 5, 0.2);
952
+ }
953
+ .rvg-confirm strong {
954
+ color: var(--rvg-color-text);
955
+ font:
956
+ 600 15px Inter,
957
+ ui-sans-serif,
958
+ system-ui,
959
+ sans-serif;
960
+ }
961
+ .rvg-confirm p {
962
+ margin: 10px 0 18px;
963
+ color: var(--rvg-color-muted);
964
+ font:
965
+ 13px/20px Inter,
966
+ ui-sans-serif,
967
+ system-ui,
968
+ sans-serif;
969
+ }
970
+ .rvg-confirm-actions {
971
+ display: flex;
972
+ justify-content: flex-end;
973
+ gap: 8px;
974
+ }
975
+ .rvg-confirm-actions button {
976
+ display: inline-flex;
977
+ height: 30px;
978
+ padding: 0 14px;
979
+ align-items: center;
980
+ justify-content: center;
981
+ gap: 6px;
982
+ border: 1px solid #c8cdd2;
983
+ border-radius: 3px;
984
+ background: var(--rvg-color-bg);
985
+ color: #3c4043;
986
+ font:
987
+ 13px Inter,
988
+ ui-sans-serif,
989
+ system-ui,
990
+ sans-serif;
991
+ cursor: pointer;
992
+ }
993
+ .rvg-confirm-actions button:disabled {
994
+ cursor: default;
995
+ opacity: .72;
996
+ }
997
+ .rvg-confirm-actions .rvg-confirm-danger {
998
+ border-color: var(--rvg-color-danger);
999
+ background: var(--rvg-color-danger);
1000
+ color: var(--rvg-color-bg);
1001
+ }
1002
+ .rvg-confirm-actions .rvg-confirm-danger svg {
1003
+ width: 14px;
1004
+ height: 14px;
1005
+ fill: none;
1006
+ stroke: currentColor;
1007
+ stroke-width: 2;
1008
+ stroke-linecap: round;
1009
+ transform-origin: center;
1010
+ animation: rvg-loading-spin .8s linear infinite;
1011
+ }
1012
+ .rvg-toast {
1013
+ position: absolute;
1014
+ z-index: 12;
1015
+ left: 50%;
1016
+ bottom: 20px;
1017
+ min-width: 96px;
1018
+ padding: 8px 14px;
1019
+ transform: translateX(-50%);
1020
+ border-radius: 3px;
1021
+ background: var(--rvg-color-tooltip-bg);
1022
+ color: var(--rvg-color-bg);
1023
+ font:
1024
+ 13px Inter,
1025
+ ui-sans-serif,
1026
+ system-ui,
1027
+ sans-serif;
1028
+ text-align: center;
1029
+ pointer-events: none;
1030
+ }
1031
+ .rvg-toast.is-error {
1032
+ background: var(--rvg-color-danger);
1033
+ }
1034
+ .rvg-column-drag-preview {
1035
+ position: relative;
1036
+ overflow: hidden;
1037
+ border: 1px solid #a9c8f5;
1038
+ background: #fff;
1039
+ box-shadow: var(--rvg-shadow-popover);
1040
+ opacity: 0.94;
1041
+ box-sizing: border-box;
1042
+ }
1043
+ .rvg-column-drag-preview-header,
1044
+ .rvg-column-drag-preview-cell {
1045
+ position: absolute;
1046
+ right: 0;
1047
+ left: 0;
1048
+ display: flex;
1049
+ padding: 0 10px;
1050
+ align-items: center;
1051
+ overflow: hidden;
1052
+ border-bottom: 1px solid var(--rvg-color-grid);
1053
+ color: var(--rvg-color-text);
1054
+ font:
1055
+ 13px Inter,
1056
+ ui-sans-serif,
1057
+ system-ui,
1058
+ sans-serif;
1059
+ white-space: nowrap;
1060
+ text-overflow: ellipsis;
1061
+ box-sizing: border-box;
1062
+ }
1063
+ .rvg-column-drag-preview-header {
1064
+ background: var(--rvg-color-header-bg);
1065
+ color: var(--rvg-color-muted);
1066
+ font-weight: 600;
1067
+ }
1068
+ .rvg-column-drag-preview-cell.is-axis-selected {
1069
+ background: var(--rvg-color-axis-selection-fill);
1070
+ }
1071
+ .rvg-column-drag-preview-cell.is-edited {
1072
+ background: var(--rvg-color-edited-fill);
1073
+ }
1074
+ .rvg-column-drag-preview-cell.is-selected {
1075
+ background: var(--rvg-color-selection-fill);
1076
+ }
1077
+ .rvg-row-drag-preview {
1078
+ position: relative;
1079
+ overflow: hidden;
1080
+ border: 1px solid #a9c8f5;
1081
+ background: #fff;
1082
+ box-shadow: var(--rvg-shadow-popover);
1083
+ box-sizing: border-box;
1084
+ }
1085
+ .rvg-row-drag-preview-cell {
1086
+ position: absolute;
1087
+ top: 0;
1088
+ display: flex;
1089
+ height: 100%;
1090
+ padding: 0 10px;
1091
+ align-items: center;
1092
+ overflow: hidden;
1093
+ border-right: 1px solid var(--rvg-color-grid);
1094
+ color: var(--rvg-color-text);
1095
+ font:
1096
+ 13px Inter,
1097
+ ui-sans-serif,
1098
+ system-ui,
1099
+ sans-serif;
1100
+ white-space: nowrap;
1101
+ text-overflow: ellipsis;
1102
+ box-sizing: border-box;
1103
+ }
1104
+ .rvg-row-drag-preview-cell svg {
1105
+ width: 16px;
1106
+ height: 16px;
1107
+ fill: var(--rvg-color-icon);
1108
+ }
1109
+ .rvg-preview-checkbox {
1110
+ display: grid;
1111
+ width: 14px;
1112
+ height: 14px;
1113
+ place-items: center;
1114
+ border: 1px solid var(--rvg-color-border-strong);
1115
+ border-radius: 3px;
1116
+ color: var(--rvg-color-bg);
1117
+ font-size: 11px;
1118
+ line-height: 1;
1119
+ }
1120
+ .rvg-preview-checkbox.is-checked {
1121
+ border-color: var(--rvg-color-primary);
1122
+ background: var(--rvg-color-primary);
1123
+ }
1124
+ .rvg-editor {
1125
+ position: absolute;
1126
+ z-index: 2;
1127
+ margin: 0;
1128
+ padding: 0 9px;
1129
+ border: 0;
1130
+ border-radius: 0;
1131
+ outline: 0;
1132
+ box-shadow: none;
1133
+ appearance: none;
1134
+ box-sizing: border-box;
1135
+ background: var(--rvg-color-bg);
1136
+ color: var(--rvg-color-text);
1137
+ font:
1138
+ 13px Inter,
1139
+ ui-sans-serif,
1140
+ system-ui,
1141
+ sans-serif;
1142
+ }
1143
+ .rvg-editor:hover,
1144
+ .rvg-editor:focus,
1145
+ .rvg-editor:focus-visible,
1146
+ .rvg-editor:active {
1147
+ border: 0;
1148
+ outline: 0;
1149
+ box-shadow: none;
1150
+ }
1151
+ .rvg-choice-editor,
1152
+ .rvg-date-editor {
1153
+ position: absolute;
1154
+ z-index: 6;
1155
+ background: var(--rvg-color-bg);
1156
+ }
1157
+ .rvg-time-editor {
1158
+ position: absolute;
1159
+ z-index: 6;
1160
+ display: flex;
1161
+ padding: 0 28px 0 8px;
1162
+ align-items: center;
1163
+ gap: 3px;
1164
+ background: var(--rvg-color-bg);
1165
+ }
1166
+ .rvg-time-field-group {
1167
+ display: contents;
1168
+ }
1169
+ .rvg-time-editor input {
1170
+ min-width: 0;
1171
+ height: 100%;
1172
+ flex: 1;
1173
+ padding: 0;
1174
+ border: 0;
1175
+ outline: 0;
1176
+ background: transparent;
1177
+ color: var(--rvg-color-text);
1178
+ font:
1179
+ 13px Inter,
1180
+ ui-sans-serif,
1181
+ system-ui,
1182
+ sans-serif;
1183
+ line-height: 1;
1184
+ }
1185
+ .rvg-native-editor {
1186
+ position: absolute;
1187
+ z-index: 6;
1188
+ display: flex;
1189
+ padding: 0 8px;
1190
+ align-items: center;
1191
+ gap: 6px;
1192
+ overflow: hidden;
1193
+ background: var(--rvg-color-bg);
1194
+ }
1195
+ .rvg-native-editor.has-clear {
1196
+ padding-right: 32px;
1197
+ }
1198
+ .rvg-native-editor input {
1199
+ min-width: 0;
1200
+ width: 100%;
1201
+ height: 20px;
1202
+ padding: 0;
1203
+ flex: 1;
1204
+ border: 0;
1205
+ outline: 0;
1206
+ background: transparent;
1207
+ color: var(--rvg-color-text);
1208
+ font:
1209
+ 13px/20px Inter,
1210
+ ui-sans-serif,
1211
+ system-ui,
1212
+ sans-serif;
1213
+ box-sizing: border-box;
1214
+ }
1215
+ .rvg-native-editor span {
1216
+ flex: none;
1217
+ color: var(--rvg-color-subtle);
1218
+ font-size: 11px;
1219
+ }
1220
+ .rvg-time-separator {
1221
+ flex: none;
1222
+ padding: 0 3px;
1223
+ color: var(--rvg-color-subtle);
1224
+ font:
1225
+ 11px Inter,
1226
+ ui-sans-serif,
1227
+ system-ui,
1228
+ sans-serif;
1229
+ }
1230
+ .rvg-time-trigger {
1231
+ position: absolute;
1232
+ right: 4px;
1233
+ display: inline-grid;
1234
+ width: 23px;
1235
+ height: 23px;
1236
+ padding: 0;
1237
+ place-items: center;
1238
+ border: 0;
1239
+ border-radius: 3px;
1240
+ background: transparent;
1241
+ cursor: pointer;
1242
+ transition: background-color 120ms ease, color 120ms ease;
1243
+ }
1244
+ .rvg-time-trigger:hover {
1245
+ background: var(--rvg-color-hover-muted);
1246
+ color: #3c4043;
1247
+ }
1248
+ .rvg-time-icon {
1249
+ width: 15px;
1250
+ height: 15px;
1251
+ fill: none;
1252
+ stroke: #70757a;
1253
+ stroke-width: 1.4;
1254
+ stroke-linecap: round;
1255
+ stroke-linejoin: round;
1256
+ }
1257
+ .rvg-time-dropdown {
1258
+ position: absolute;
1259
+ top: calc(100% + 4px);
1260
+ left: 0;
1261
+ display: grid;
1262
+ width: 116px;
1263
+ height: 233px;
1264
+ grid-template-rows: minmax(0, 1fr) 33px;
1265
+ overflow: hidden;
1266
+ border: 1px solid var(--rvg-color-border);
1267
+ border-radius: 5px;
1268
+ opacity: 0;
1269
+ visibility: hidden;
1270
+ background: var(--rvg-color-bg);
1271
+ box-shadow: var(--rvg-shadow-soft);
1272
+ pointer-events: none;
1273
+ transform: translateY(-3px);
1274
+ transition:
1275
+ opacity 120ms ease,
1276
+ transform 120ms ease,
1277
+ visibility 0s linear 120ms;
1278
+ }
1279
+ .rvg-time-dropdown.has-seconds {
1280
+ width: 168px;
1281
+ }
1282
+ .rvg-time-dropdown.is-range {
1283
+ width: 232px;
1284
+ height: 267px;
1285
+ }
1286
+ .rvg-time-dropdown.is-range.has-seconds {
1287
+ width: 336px;
1288
+ }
1289
+ .rvg-time-dropdown.is-open {
1290
+ opacity: 1;
1291
+ visibility: visible;
1292
+ pointer-events: auto;
1293
+ transform: translateY(0);
1294
+ transition-delay: 0s;
1295
+ }
1296
+ .rvg-time-panels {
1297
+ display: grid;
1298
+ min-height: 0;
1299
+ grid-template-columns: repeat(2, 1fr);
1300
+ }
1301
+ .rvg-time-dropdown:not(.is-range) .rvg-time-panels {
1302
+ grid-template-columns: 1fr;
1303
+ }
1304
+ .rvg-time-picker-panel {
1305
+ display: grid;
1306
+ min-width: 0;
1307
+ min-height: 0;
1308
+ grid-template-rows: minmax(0, 1fr);
1309
+ }
1310
+ .rvg-time-picker-panel + .rvg-time-picker-panel {
1311
+ border-left: 1px solid var(--rvg-color-border);
1312
+ }
1313
+ .rvg-time-picker-panel > strong {
1314
+ display: grid;
1315
+ height: 30px;
1316
+ place-items: center;
1317
+ color: var(--rvg-color-muted);
1318
+ font:
1319
+ 600 11px Inter,
1320
+ ui-sans-serif,
1321
+ system-ui,
1322
+ sans-serif;
1323
+ }
1324
+ .rvg-time-picker-panel:has(> strong) {
1325
+ grid-template-rows: 30px minmax(0, 1fr);
1326
+ }
1327
+ .rvg-time-picker-columns {
1328
+ display: grid;
1329
+ min-height: 0;
1330
+ grid-template-columns: repeat(2, 1fr);
1331
+ grid-template-rows: 24px minmax(0, 1fr);
1332
+ overflow: hidden;
1333
+ }
1334
+ .rvg-time-picker-columns.has-seconds {
1335
+ grid-template-columns: repeat(3, 1fr);
1336
+ }
1337
+ .rvg-time-column-label {
1338
+ display: grid;
1339
+ height: 24px;
1340
+ place-items: center;
1341
+ color: var(--rvg-color-subtle);
1342
+ font:
1343
+ 12px Inter,
1344
+ ui-sans-serif,
1345
+ system-ui,
1346
+ sans-serif;
1347
+ }
1348
+ .rvg-time-column-label + .rvg-time-column-label {
1349
+ border-left: 1px solid #eef0f2;
1350
+ }
1351
+ .rvg-time-options {
1352
+ min-height: 0;
1353
+ overflow-y: auto;
1354
+ padding: 4px;
1355
+ scrollbar-width: none;
1356
+ }
1357
+ .rvg-time-options + .rvg-time-options {
1358
+ border-left: 1px solid #eef0f2;
1359
+ }
1360
+ .rvg-time-options::-webkit-scrollbar {
1361
+ display: none;
1362
+ }
1363
+ .rvg-time-options button {
1364
+ display: block;
1365
+ width: 100%;
1366
+ height: 28px;
1367
+ padding: 0;
1368
+ border: 0;
1369
+ border-radius: 3px;
1370
+ background: transparent;
1371
+ color: #3c4043;
1372
+ font:
1373
+ 12px Inter,
1374
+ ui-sans-serif,
1375
+ system-ui,
1376
+ sans-serif;
1377
+ cursor: pointer;
1378
+ transition: background-color 100ms ease, color 100ms ease;
1379
+ }
1380
+ .rvg-time-options button:hover {
1381
+ background: var(--rvg-color-hover);
1382
+ }
1383
+ .rvg-time-options button.is-selected {
1384
+ background: var(--rvg-color-primary-soft);
1385
+ color: var(--rvg-color-primary);
1386
+ font-weight: 600;
1387
+ }
1388
+ .rvg-time-footer {
1389
+ display: flex;
1390
+ grid-column: 1 / -1;
1391
+ padding: 4px 6px;
1392
+ align-items: center;
1393
+ justify-content: flex-end;
1394
+ border-top: 1px solid #eef0f2;
1395
+ }
1396
+ .rvg-time-footer button,
1397
+ .rvg-date-footer button {
1398
+ min-width: 46px;
1399
+ height: 24px;
1400
+ padding: 0 9px;
1401
+ border: 0;
1402
+ border-radius: 4px;
1403
+ background: var(--rvg-color-primary);
1404
+ color: var(--rvg-color-bg);
1405
+ font:
1406
+ 11px Inter,
1407
+ ui-sans-serif,
1408
+ system-ui,
1409
+ sans-serif;
1410
+ cursor: pointer;
1411
+ transition: background-color 120ms ease, opacity 120ms ease;
1412
+ }
1413
+ .rvg-time-footer button:hover,
1414
+ .rvg-date-footer button:hover:not(:disabled) {
1415
+ background: var(--rvg-color-primary-hover);
1416
+ }
1417
+ .rvg-choice-editor [data-part=control],
1418
+ .rvg-choice-editor [data-part=trigger],
1419
+ .rvg-date-editor [data-part=control] {
1420
+ width: 100%;
1421
+ height: 100%;
1422
+ }
1423
+ .rvg-choice-editor [data-part=control],
1424
+ .rvg-date-editor [data-part=control] {
1425
+ position: relative;
1426
+ }
1427
+ .rvg-choice-editor [data-part=trigger],
1428
+ .rvg-date-editor [data-part=input],
1429
+ .rvg-date-value {
1430
+ display: flex;
1431
+ min-width: 0;
1432
+ height: 100%;
1433
+ padding: 0 8px;
1434
+ flex: 1;
1435
+ align-items: center;
1436
+ border: 0;
1437
+ outline: 0;
1438
+ background: var(--rvg-color-bg);
1439
+ color: var(--rvg-color-text);
1440
+ font:
1441
+ 13px Inter,
1442
+ ui-sans-serif,
1443
+ system-ui,
1444
+ sans-serif;
1445
+ font-weight: 400;
1446
+ line-height: normal;
1447
+ text-align: left;
1448
+ }
1449
+ .rvg-choice-editor [data-part=trigger] {
1450
+ padding: 0 28px 0 9px;
1451
+ }
1452
+ .rvg-date-value {
1453
+ padding-top: 0;
1454
+ padding-bottom: 2px;
1455
+ }
1456
+ .rvg-choice-editor [data-part=value-text] {
1457
+ min-width: 0;
1458
+ overflow: hidden;
1459
+ font: inherit;
1460
+ line-height: normal;
1461
+ white-space: nowrap;
1462
+ text-overflow: ellipsis;
1463
+ }
1464
+ .rvg-date-editor [data-part=control] {
1465
+ display: flex;
1466
+ padding-right: 28px;
1467
+ align-items: center;
1468
+ }
1469
+ .rvg-date-separator {
1470
+ flex: none;
1471
+ color: var(--rvg-color-subtle);
1472
+ font:
1473
+ 11px Inter,
1474
+ ui-sans-serif,
1475
+ system-ui,
1476
+ sans-serif;
1477
+ }
1478
+ .rvg-choice-editor [data-part=indicator],
1479
+ .rvg-date-editor [data-part=trigger] {
1480
+ position: absolute;
1481
+ top: 50%;
1482
+ right: 4px;
1483
+ display: grid;
1484
+ width: 23px;
1485
+ height: 23px;
1486
+ padding: 0;
1487
+ place-items: center;
1488
+ border: 0;
1489
+ border-radius: 3px;
1490
+ background: transparent;
1491
+ color: #70757a;
1492
+ cursor: pointer;
1493
+ transform: translateY(-50%);
1494
+ transition: background-color 120ms ease, color 120ms ease;
1495
+ }
1496
+ .rvg-clear-trigger {
1497
+ position: absolute;
1498
+ top: 50%;
1499
+ right: 4px;
1500
+ display: grid;
1501
+ width: 23px;
1502
+ height: 23px;
1503
+ padding: 0;
1504
+ place-items: center;
1505
+ border: 0;
1506
+ border-radius: 3px;
1507
+ background: transparent;
1508
+ color: #9aa0a6;
1509
+ cursor: pointer;
1510
+ transform: translateY(-50%);
1511
+ transition: background-color 120ms ease, color 120ms ease;
1512
+ }
1513
+ .rvg-clear-trigger:hover {
1514
+ background: var(--rvg-color-hover-muted);
1515
+ color: #3c4043;
1516
+ }
1517
+ .rvg-clear-icon {
1518
+ display: block;
1519
+ width: 14px;
1520
+ height: 14px;
1521
+ fill: none;
1522
+ stroke: currentColor;
1523
+ stroke-width: 1.7;
1524
+ stroke-linecap: round;
1525
+ }
1526
+ .rvg-date-editor [data-part=trigger]:hover {
1527
+ background: var(--rvg-color-hover-muted);
1528
+ color: #3c4043;
1529
+ }
1530
+ .rvg-calendar-icon {
1531
+ display: block;
1532
+ width: 16px;
1533
+ height: 16px;
1534
+ fill: currentColor;
1535
+ stroke: currentColor;
1536
+ stroke-width: 12px;
1537
+ stroke-linejoin: round;
1538
+ paint-order: stroke fill;
1539
+ }
1540
+ .rvg-choice-editor [data-part=trigger]:hover [data-part=indicator] {
1541
+ color: #3c4043;
1542
+ }
1543
+ .rvg-choice-chevron {
1544
+ width: 16px;
1545
+ height: 16px;
1546
+ transition: transform 160ms ease;
1547
+ }
1548
+ .rvg-choice-chevron path,
1549
+ .rvg-choice-check path {
1550
+ fill: none;
1551
+ stroke: currentColor;
1552
+ stroke-width: 1.5;
1553
+ stroke-linecap: round;
1554
+ stroke-linejoin: round;
1555
+ }
1556
+ .rvg-choice-editor[data-state=open] .rvg-choice-chevron {
1557
+ transform: rotate(180deg);
1558
+ }
1559
+ .rvg-choice-content,
1560
+ .rvg-date-content {
1561
+ z-index: 30;
1562
+ border: 1px solid var(--rvg-color-border);
1563
+ background: var(--rvg-color-bg);
1564
+ color: var(--rvg-color-text);
1565
+ box-shadow: var(--rvg-shadow-popover);
1566
+ }
1567
+ .rvg-choice-content {
1568
+ min-width: var(--reference-width);
1569
+ padding: 5px;
1570
+ transform-origin: var(--transform-origin);
1571
+ border-radius: 4px;
1572
+ }
1573
+ .rvg-choice-content[data-state=open] {
1574
+ animation: rvg-choice-in 150ms cubic-bezier(.2, .8, .2, 1);
1575
+ }
1576
+ .rvg-choice-content[data-state=closed] {
1577
+ animation: rvg-choice-out 110ms ease-in;
1578
+ }
1579
+ .rvg-choice-item {
1580
+ display: flex;
1581
+ height: 32px;
1582
+ padding: 0 8px 0 10px;
1583
+ align-items: center;
1584
+ justify-content: space-between;
1585
+ border-radius: 3px;
1586
+ color: var(--rvg-color-text);
1587
+ font:
1588
+ 13px Inter,
1589
+ ui-sans-serif,
1590
+ system-ui,
1591
+ sans-serif;
1592
+ cursor: pointer;
1593
+ transition: background-color 100ms ease, color 100ms ease;
1594
+ }
1595
+ .rvg-choice-item:is(:hover, [data-highlighted]) {
1596
+ background: var(--rvg-color-hover);
1597
+ }
1598
+ .rvg-choice-item[data-state=checked] {
1599
+ background: var(--rvg-color-primary-soft);
1600
+ color: var(--rvg-color-primary);
1601
+ }
1602
+ .rvg-choice-item [data-part=item-indicator] {
1603
+ display: grid;
1604
+ width: 18px;
1605
+ height: 18px;
1606
+ flex: none;
1607
+ place-items: center;
1608
+ visibility: hidden;
1609
+ }
1610
+ .rvg-choice-item[data-state=checked] [data-part=item-indicator] {
1611
+ visibility: visible;
1612
+ }
1613
+ .rvg-choice-check {
1614
+ width: 15px;
1615
+ height: 15px;
1616
+ }
1617
+ @keyframes rvg-choice-in {
1618
+ from {
1619
+ opacity: 0;
1620
+ transform: translateY(-4px) scale(.98);
1621
+ }
1622
+ to {
1623
+ opacity: 1;
1624
+ transform: translateY(0) scale(1);
1625
+ }
1626
+ }
1627
+ @keyframes rvg-choice-out {
1628
+ from {
1629
+ opacity: 1;
1630
+ transform: translateY(0) scale(1);
1631
+ }
1632
+ to {
1633
+ opacity: 0;
1634
+ transform: translateY(-3px) scale(.98);
1635
+ }
1636
+ }
1637
+ @media (prefers-reduced-motion: reduce) {
1638
+ .rvg-choice-chevron {
1639
+ transition: none;
1640
+ }
1641
+ .rvg-choice-content[data-state] {
1642
+ animation: none;
1643
+ }
1644
+ }
1645
+ .rvg-date-content {
1646
+ width: 272px;
1647
+ padding: 10px;
1648
+ }
1649
+ .rvg-date-content.is-date-time {
1650
+ display: grid;
1651
+ width: 440px;
1652
+ grid-template-columns: minmax(0, 1fr) 158px;
1653
+ column-gap: 10px;
1654
+ }
1655
+ .rvg-date-content.is-date-range {
1656
+ width: 552px;
1657
+ padding: 10px 12px 12px;
1658
+ }
1659
+ .rvg-date-range-control {
1660
+ height: 28px;
1661
+ grid-template-columns: 28px 28px minmax(0, 1fr) minmax(0, 1fr) 28px 28px !important;
1662
+ column-gap: 4px;
1663
+ }
1664
+ .rvg-date-range-control strong {
1665
+ color: var(--rvg-color-text);
1666
+ font:
1667
+ 600 13px Inter,
1668
+ ui-sans-serif,
1669
+ system-ui,
1670
+ sans-serif;
1671
+ text-align: center;
1672
+ }
1673
+ .rvg-date-range-months {
1674
+ display: grid;
1675
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1676
+ align-items: start;
1677
+ gap: 16px;
1678
+ }
1679
+ .rvg-date-footer {
1680
+ display: flex;
1681
+ margin: 8px -10px -10px;
1682
+ padding: 8px 10px;
1683
+ justify-content: flex-end;
1684
+ border-top: 1px solid #eef0f2;
1685
+ }
1686
+ .rvg-date-content.is-date-time .rvg-date-footer {
1687
+ grid-column: 1 / -1;
1688
+ }
1689
+ .rvg-date-footer button:disabled {
1690
+ opacity: .45;
1691
+ cursor: not-allowed;
1692
+ }
1693
+ .rvg-date-range-footer button:disabled {
1694
+ opacity: .42;
1695
+ cursor: default;
1696
+ }
1697
+ .rvg-date-content .rvg-date-day-control {
1698
+ height: 28px;
1699
+ grid-template-columns: 28px 28px minmax(0, 1fr) 28px 28px !important;
1700
+ }
1701
+ .rvg-date-content .rvg-year-step,
1702
+ .rvg-date-range-control > button,
1703
+ .rvg-date-content [data-part=prev-trigger],
1704
+ .rvg-date-content [data-part=next-trigger] {
1705
+ display: grid;
1706
+ width: 28px;
1707
+ height: 28px;
1708
+ padding: 0;
1709
+ place-items: center;
1710
+ border: 0;
1711
+ border-radius: 3px;
1712
+ background: transparent;
1713
+ color: var(--rvg-color-muted);
1714
+ cursor: pointer;
1715
+ }
1716
+ .rvg-date-content .rvg-year-step:hover,
1717
+ .rvg-date-range-control > button:hover,
1718
+ .rvg-date-content [data-part=prev-trigger]:hover,
1719
+ .rvg-date-content [data-part=next-trigger]:hover {
1720
+ background: var(--rvg-color-hover);
1721
+ color: #3c4043;
1722
+ }
1723
+ .rvg-calendar-step-icon {
1724
+ display: block;
1725
+ width: 18px;
1726
+ height: 16px;
1727
+ fill: none;
1728
+ stroke: currentColor;
1729
+ stroke-width: 1.5;
1730
+ stroke-linecap: round;
1731
+ stroke-linejoin: round;
1732
+ }
1733
+ .rvg-date-time-panel {
1734
+ min-width: 0;
1735
+ padding-left: 10px;
1736
+ border-left: 1px solid #eef0f2;
1737
+ }
1738
+ .rvg-date-time-columns {
1739
+ display: grid;
1740
+ height: 240px;
1741
+ grid-template-columns: repeat(2, 1fr);
1742
+ grid-template-rows: 24px minmax(0, 1fr);
1743
+ overflow: hidden;
1744
+ }
1745
+ .rvg-date-time-columns.has-seconds {
1746
+ grid-template-columns: repeat(3, 1fr);
1747
+ }
1748
+ .rvg-date-time-tabs {
1749
+ display: grid;
1750
+ height: 30px;
1751
+ margin-bottom: 4px;
1752
+ grid-template-columns: repeat(2, 1fr);
1753
+ gap: 3px;
1754
+ padding: 2px;
1755
+ border-radius: 4px;
1756
+ background: #f4f5f6;
1757
+ }
1758
+ .rvg-date-time-tabs button {
1759
+ border: 0;
1760
+ border-radius: 3px;
1761
+ background: transparent;
1762
+ color: #70757a;
1763
+ font:
1764
+ 11px Inter,
1765
+ ui-sans-serif,
1766
+ system-ui,
1767
+ sans-serif;
1768
+ cursor: pointer;
1769
+ }
1770
+ .rvg-date-time-tabs button.is-active {
1771
+ background: var(--rvg-color-bg);
1772
+ color: var(--rvg-color-primary);
1773
+ box-shadow: 0 1px 3px rgba(60, 64, 67, .14);
1774
+ }
1775
+ .rvg-date-time-tabs + .rvg-date-time-columns {
1776
+ height: 206px;
1777
+ }
1778
+ .rvg-date-content [data-part=view-control] {
1779
+ display: grid;
1780
+ grid-template-columns: 30px 1fr 30px;
1781
+ align-items: center;
1782
+ margin-bottom: 6px;
1783
+ }
1784
+ .rvg-date-content [data-part=prev-trigger],
1785
+ .rvg-date-content [data-part=next-trigger],
1786
+ .rvg-date-content [data-part=view-trigger] {
1787
+ height: 28px;
1788
+ border: 0;
1789
+ background: transparent;
1790
+ color: var(--rvg-color-muted);
1791
+ font:
1792
+ 13px Inter,
1793
+ ui-sans-serif,
1794
+ system-ui,
1795
+ sans-serif;
1796
+ cursor: pointer;
1797
+ }
1798
+ .rvg-date-content [data-part=view-trigger] {
1799
+ min-width: 0;
1800
+ overflow: hidden;
1801
+ white-space: nowrap;
1802
+ text-overflow: ellipsis;
1803
+ }
1804
+ .rvg-date-content table {
1805
+ width: 100%;
1806
+ border-collapse: collapse;
1807
+ table-layout: fixed;
1808
+ }
1809
+ .rvg-date-content th {
1810
+ height: 26px;
1811
+ color: var(--rvg-color-subtle);
1812
+ font:
1813
+ 11px Inter,
1814
+ ui-sans-serif,
1815
+ system-ui,
1816
+ sans-serif;
1817
+ font-weight: 400;
1818
+ }
1819
+ .rvg-date-content td {
1820
+ height: 32px;
1821
+ padding: 1px;
1822
+ text-align: center;
1823
+ }
1824
+ .rvg-date-content [data-part=table-cell-trigger] {
1825
+ display: inline-grid;
1826
+ width: 28px;
1827
+ height: 28px;
1828
+ padding: 0;
1829
+ place-items: center;
1830
+ border: 0;
1831
+ border-radius: 3px;
1832
+ background: transparent;
1833
+ color: var(--rvg-color-text);
1834
+ font:
1835
+ 12px Inter,
1836
+ ui-sans-serif,
1837
+ system-ui,
1838
+ sans-serif;
1839
+ line-height: 1;
1840
+ cursor: pointer;
1841
+ }
1842
+ .rvg-date-content [data-part=table-cell-trigger]:hover,
1843
+ .rvg-date-content [data-part=table-cell-trigger][data-focus] {
1844
+ background: #eef3fb;
1845
+ }
1846
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger][data-focus]:not([data-selected]):not(.is-range-preview) {
1847
+ background: transparent;
1848
+ }
1849
+ .rvg-date-content [data-part=table-cell-trigger][data-selected] {
1850
+ background: var(--rvg-color-primary);
1851
+ color: var(--rvg-color-bg);
1852
+ }
1853
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger][data-in-range] {
1854
+ border-radius: 0;
1855
+ background: var(--rvg-color-range-fill);
1856
+ color: var(--rvg-color-text);
1857
+ }
1858
+ .rvg-date-content.is-date-range [data-part=table-cell-trigger].is-range-preview,
1859
+ .rvg-date-content.is-date-time.has-range-selection [data-part=table-cell-trigger].is-range-preview {
1860
+ border-radius: 0;
1861
+ background: var(--rvg-color-range-fill);
1862
+ color: var(--rvg-color-text);
1863
+ }
1864
+ .rvg-date-content.is-date-range [data-part=table-cell-trigger].is-range-preview-end,
1865
+ .rvg-date-content.is-date-time.has-range-selection [data-part=table-cell-trigger].is-range-preview-end {
1866
+ border-radius: 3px;
1867
+ background: var(--rvg-color-primary);
1868
+ color: var(--rvg-color-bg);
1869
+ }
1870
+ .rvg-date-content.has-range-selection td {
1871
+ padding-right: 0;
1872
+ padding-left: 0;
1873
+ }
1874
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger] {
1875
+ width: 100%;
1876
+ }
1877
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger][data-range-start],
1878
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger][data-range-end] {
1879
+ border-radius: 3px;
1880
+ background: var(--rvg-color-primary);
1881
+ color: var(--rvg-color-bg);
1882
+ }
1883
+ .rvg-date-content [data-part=table-cell-trigger][data-outside-range] {
1884
+ color: #bdc1c6;
1885
+ }
1886
+ .rvg-date-content.has-range-selection [data-part=table-cell-trigger][data-outside-range] {
1887
+ border-radius: 3px;
1888
+ background: transparent;
1889
+ color: #bdc1c6;
1890
+ }
1891
+ .rvg-date-content :is(.rvg-date-view-month, .rvg-date-view-year) td {
1892
+ height: 42px;
1893
+ padding: 3px;
1894
+ }
1895
+ .rvg-date-content :is(.rvg-date-view-month, .rvg-date-view-year) [data-part=table-cell-trigger] {
1896
+ width: 100%;
1897
+ height: 34px;
1898
+ }
1899
+ .rvg-empty {
1900
+ position: absolute;
1901
+ z-index: 3;
1902
+ inset: 40px 0 0;
1903
+ display: grid;
1904
+ place-items: center;
1905
+ background: var(--rvg-color-bg);
1906
+ pointer-events: none;
1907
+ color: #73777a;
1908
+ font:
1909
+ 13px Inter,
1910
+ ui-sans-serif,
1911
+ system-ui,
1912
+ sans-serif;
1913
+ }
1914
+ .rvg-default-empty {
1915
+ display: flex;
1916
+ flex-direction: column;
1917
+ align-items: center;
1918
+ justify-content: center;
1919
+ gap: 13px;
1920
+ color: #8a9097;
1921
+ }
1922
+ .rvg-default-empty svg {
1923
+ display: block;
1924
+ width: 79px;
1925
+ height: 86px;
1926
+ }
1927
+ .rvg-default-empty span {
1928
+ font-size: 13px;
1929
+ line-height: 20px;
1930
+ }
1931
+ .rvg-initial-loading {
1932
+ position: absolute;
1933
+ z-index: 20;
1934
+ right: 0;
1935
+ bottom: 0;
1936
+ left: 0;
1937
+ overflow: hidden;
1938
+ background: var(--rvg-color-bg);
1939
+ pointer-events: auto;
1940
+ }
1941
+ .rvg-initial-loading::after {
1942
+ position: absolute;
1943
+ z-index: 4;
1944
+ inset: 0;
1945
+ border-bottom: 1px solid var(--rvg-color-grid);
1946
+ border-left: 1px solid var(--rvg-color-grid);
1947
+ pointer-events: none;
1948
+ content: "";
1949
+ }
1950
+ .rvg-loading-row {
1951
+ position: relative;
1952
+ }
1953
+ .rvg-loading-row span {
1954
+ position: absolute;
1955
+ top: 0;
1956
+ display: flex;
1957
+ height: 100%;
1958
+ padding: 0 10px;
1959
+ align-items: center;
1960
+ border-right: 1px solid var(--rvg-color-grid);
1961
+ border-bottom: 1px solid var(--rvg-color-grid);
1962
+ }
1963
+ .rvg-root.is-vertical-borderless .rvg-loading-row span {
1964
+ border-right: 0;
1965
+ }
1966
+ .rvg-root.is-striped .rvg-loading-row:nth-child(even) span {
1967
+ background: var(--rvg-color-stripe) !important;
1968
+ }
1969
+ .rvg-root.is-vertical-borderless .rvg-initial-loading::after {
1970
+ border-left: 0;
1971
+ }
1972
+ .rvg-loading-row i {
1973
+ display: block;
1974
+ height: 7px;
1975
+ border-radius: 2px;
1976
+ background: #e2e6e9;
1977
+ content: "";
1978
+ }
1979
+ .rvg-loading-row span.is-utility {
1980
+ padding: 0;
1981
+ }
1982
+ .rvg-loading-row span.is-utility i {
1983
+ width: 13px;
1984
+ height: 13px;
1985
+ overflow: hidden;
1986
+ border: 0;
1987
+ border-radius: 50%;
1988
+ background: #e2e6e9;
1989
+ }
1990
+ .rvg-loading-fixed-shadow {
1991
+ position: absolute;
1992
+ z-index: 3;
1993
+ top: 0;
1994
+ bottom: 0;
1995
+ width: 10px;
1996
+ pointer-events: none;
1997
+ }
1998
+ .rvg-loading-fixed-shadow.is-left {
1999
+ background:
2000
+ linear-gradient(
2001
+ 90deg,
2002
+ rgba(5, 5, 5, .06),
2003
+ transparent);
2004
+ }
2005
+ .rvg-loading-fixed-shadow.is-right {
2006
+ background:
2007
+ linear-gradient(
2008
+ 90deg,
2009
+ transparent,
2010
+ rgba(5, 5, 5, .06));
2011
+ }
2012
+ .rvg-loading-row i {
2013
+ position: relative;
2014
+ overflow: hidden;
2015
+ }
2016
+ .rvg-loading-row i::after {
2017
+ position: absolute;
2018
+ inset: 0;
2019
+ transform: translateX(-120%);
2020
+ background:
2021
+ linear-gradient(
2022
+ 90deg,
2023
+ transparent,
2024
+ #fff,
2025
+ transparent);
2026
+ content: "";
2027
+ animation: rvg-loading-shimmer 1.35s ease-in-out infinite;
2028
+ }
2029
+ .rvg-refresh-loading {
2030
+ position: absolute;
2031
+ z-index: 20;
2032
+ inset: 0;
2033
+ display: grid;
2034
+ place-items: center;
2035
+ background: rgba(238, 242, 246, 0.4);
2036
+ pointer-events: auto;
2037
+ }
2038
+ .rvg-refresh-loading svg {
2039
+ width: 24px;
2040
+ height: 24px;
2041
+ fill: none;
2042
+ stroke: var(--rvg-color-primary);
2043
+ stroke-width: 2;
2044
+ stroke-linecap: round;
2045
+ transform-origin: center;
2046
+ animation: rvg-loading-spin .8s linear infinite;
2047
+ }
2048
+ .rvg-custom-loading {
2049
+ position: absolute;
2050
+ z-index: 20;
2051
+ inset: 0;
2052
+ display: grid;
2053
+ place-items: center;
2054
+ background: rgba(238, 242, 246, 0.4);
2055
+ pointer-events: auto;
2056
+ }
2057
+ @keyframes rvg-loading-shimmer {
2058
+ to {
2059
+ transform: translateX(120%);
2060
+ }
2061
+ }
2062
+ @keyframes rvg-loading-spin {
2063
+ to {
2064
+ transform: rotate(360deg);
2065
+ }
2066
+ }
2067
+ @keyframes rvg-loading-icon-pulse {
2068
+ from {
2069
+ opacity: .45;
2070
+ }
2071
+ to {
2072
+ opacity: 1;
2073
+ }
2074
+ }