@proveanything/smartlinks-utils-ui 0.3.0 → 0.3.1

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.
@@ -2,19 +2,30 @@
2
2
  :root {
3
3
  --ra-status-own: var(--ra-emerald, 142 71% 45%);
4
4
  --ra-status-shared: var(--ra-amber, 38 92% 50%);
5
- --ra-status-missing: var(--muted-foreground, 0 0% 50%);
5
+ --ra-status-missing: var(--muted-foreground, 220 9% 46%);
6
6
  --ra-accent: var(--primary, 222 47% 11%);
7
7
  --ra-surface: var(--card, 0 0% 100%);
8
- --ra-border: var(--border, 0 0% 90%);
9
- --ra-text: var(--foreground, 0 0% 10%);
10
- --ra-muted: var(--muted, 0 0% 96%);
11
- --ra-muted-text: var(--muted-foreground, 0 0% 40%);
12
- --ra-radius: 0.5rem;
8
+ --ra-border: var(--border, 220 13% 91%);
9
+ --ra-text: var(--foreground, 222 47% 11%);
10
+ --ra-muted: var(--muted, 220 14% 96%);
11
+ --ra-muted-text: var(--muted-foreground, 220 9% 46%);
12
+ --ra-radius: var(--radius, 0.625rem);
13
13
  --ra-dot-size: 0.5rem;
14
- }
15
- .ra-shell {
16
- color: hsl(var(--ra-text));
17
- background: hsl(var(--ra-surface));
14
+ --ra-page-bg: var(--background, 220 14% 98%);
15
+ --ra-card-shadow: 0 1px 2px hsl(var(--ra-accent) / 0.04), 0 4px 12px hsl(var(--ra-accent) / 0.05);
16
+ --ra-card-shadow-hover: 0 2px 4px hsl(var(--ra-accent) / 0.06), 0 8px 24px hsl(var(--ra-accent) / 0.08);
17
+ --ra-row-hover: hsl(var(--ra-accent) / 0.05);
18
+ --ra-row-active-bg: hsl(var(--ra-accent) / 0.10);
19
+ --ra-row-active-bd: hsl(var(--ra-accent) / 0.45);
20
+ --ra-focus-ring: hsl(var(--ra-accent) / 0.35);
21
+ --ra-font-display: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
22
+ --ra-font-ui: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
23
+ --ra-title-weight: 600;
24
+ --ra-display-weight: 700;
25
+ --ra-info: var(--ra-blue, 214 95% 55%);
26
+ --ra-success: var(--ra-emerald, 142 71% 45%);
27
+ --ra-warning: var(--ra-amber, 38 92% 50%);
28
+ --ra-danger: var(--destructive, 0 72% 51%);
18
29
  }
19
30
  .ra-status-dot {
20
31
  display: inline-block;
@@ -34,7 +45,630 @@
34
45
  border: 1px solid hsl(var(--ra-status-missing) / 0.6);
35
46
  }
36
47
  .ra-row-active {
48
+ background: var(--ra-row-active-bg);
49
+ border-color: var(--ra-row-active-bd) !important;
50
+ }
51
+
52
+ /* src/components/RecordsAdmin/shell/shell.css */
53
+ .ra-shell {
54
+ color: hsl(var(--ra-text));
55
+ background: hsl(var(--ra-page-bg));
56
+ font-family: var(--ra-font-ui);
57
+ }
58
+ .ra-shell *,
59
+ .ra-shell *::before,
60
+ .ra-shell *::after {
61
+ box-sizing: border-box;
62
+ }
63
+ .ra-shell .ra-card {
64
+ background: hsl(var(--ra-surface));
65
+ border: 1px solid hsl(var(--ra-border));
66
+ border-radius: var(--ra-radius);
67
+ box-shadow: var(--ra-card-shadow);
68
+ }
69
+ .ra-shell .ra-card-hover {
70
+ transition:
71
+ box-shadow .18s ease,
72
+ transform .18s ease,
73
+ border-color .18s ease;
74
+ }
75
+ .ra-shell .ra-card-hover:hover {
76
+ box-shadow: var(--ra-card-shadow-hover);
77
+ }
78
+ .ra-shell .ra-display {
79
+ font-family: var(--ra-font-display);
80
+ font-weight: var(--ra-display-weight);
81
+ letter-spacing: -0.01em;
82
+ }
83
+ .ra-shell .ra-title {
84
+ font-weight: var(--ra-title-weight);
85
+ }
86
+ .ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {
87
+ outline: none;
88
+ box-shadow: 0 0 0 3px var(--ra-focus-ring);
89
+ border-radius: calc(var(--ra-radius) * 0.6);
90
+ }
91
+ .ra-shell .ra-header {
92
+ position: relative;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 1rem;
96
+ padding: 1rem 1.25rem;
97
+ border-radius: var(--ra-radius);
98
+ border: 1px solid hsl(var(--ra-accent) / 0.12);
99
+ background:
100
+ linear-gradient(
101
+ 135deg,
102
+ hsl(var(--ra-accent) / 0.08),
103
+ hsl(var(--ra-accent) / 0.02) 60%,
104
+ hsl(var(--ra-surface)) 100%);
105
+ box-shadow: var(--ra-card-shadow);
106
+ }
107
+ .ra-shell .ra-header-icon {
108
+ flex-shrink: 0;
109
+ width: 2.75rem;
110
+ height: 2.75rem;
111
+ border-radius: calc(var(--ra-radius) * 0.9);
112
+ display: inline-flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ background: hsl(var(--ra-accent) / 0.12);
116
+ color: hsl(var(--ra-accent));
117
+ border: 1px solid hsl(var(--ra-accent) / 0.18);
118
+ }
119
+ .ra-shell .ra-header-text {
120
+ flex: 1;
121
+ min-width: 0;
122
+ }
123
+ .ra-shell .ra-header-title {
124
+ font-family: var(--ra-font-display);
125
+ font-weight: var(--ra-display-weight);
126
+ font-size: 1.125rem;
127
+ line-height: 1.2;
128
+ color: hsl(var(--ra-text));
129
+ letter-spacing: -0.01em;
130
+ margin: 0;
131
+ }
132
+ .ra-shell .ra-header-subtitle {
133
+ font-size: 0.8125rem;
134
+ color: hsl(var(--ra-muted-text));
135
+ margin-top: 0.125rem;
136
+ white-space: nowrap;
137
+ overflow: hidden;
138
+ text-overflow: ellipsis;
139
+ }
140
+ .ra-shell .ra-header-stats {
141
+ display: flex;
142
+ align-items: stretch;
143
+ gap: 0.25rem;
144
+ padding: 0.25rem 0.5rem;
145
+ border-radius: calc(var(--ra-radius) * 0.75);
146
+ background: hsl(var(--ra-surface) / 0.7);
147
+ border: 1px solid hsl(var(--ra-border));
148
+ }
149
+ .ra-shell .ra-stat {
150
+ display: flex;
151
+ flex-direction: column;
152
+ align-items: center;
153
+ padding: 0.25rem 0.5rem;
154
+ min-width: 3rem;
155
+ }
156
+ .ra-shell .ra-stat-value {
157
+ font-family: var(--ra-font-display);
158
+ font-weight: var(--ra-display-weight);
159
+ font-size: 0.95rem;
160
+ color: hsl(var(--ra-text));
161
+ line-height: 1;
162
+ }
163
+ .ra-shell .ra-stat-label {
164
+ font-size: 0.625rem;
165
+ text-transform: uppercase;
166
+ letter-spacing: 0.04em;
167
+ color: hsl(var(--ra-muted-text));
168
+ margin-top: 0.2rem;
169
+ }
170
+ .ra-shell .ra-stat-divider {
171
+ width: 1px;
172
+ background: hsl(var(--ra-border));
173
+ margin: 0.25rem 0;
174
+ }
175
+ .ra-shell .ra-header-actions {
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 0.5rem;
179
+ }
180
+ .ra-shell .ra-tabs {
181
+ display: flex;
182
+ gap: 0.25rem;
183
+ padding: 0.25rem;
184
+ background: hsl(var(--ra-muted));
185
+ border-radius: calc(var(--ra-radius) * 0.85);
186
+ border: 1px solid hsl(var(--ra-border));
187
+ }
188
+ .ra-shell .ra-tab {
189
+ display: inline-flex;
190
+ align-items: center;
191
+ gap: 0.4rem;
192
+ padding: 0.4rem 0.7rem;
193
+ border-radius: calc(var(--ra-radius) * 0.65);
194
+ font-size: 0.78rem;
195
+ font-weight: 500;
196
+ color: hsl(var(--ra-muted-text));
197
+ background: transparent;
198
+ border: 0;
199
+ cursor: pointer;
200
+ transition:
201
+ background .15s ease,
202
+ color .15s ease,
203
+ transform .15s ease;
204
+ white-space: nowrap;
205
+ }
206
+ .ra-shell .ra-tab:hover {
207
+ background: hsl(var(--ra-surface));
208
+ color: hsl(var(--ra-text));
209
+ }
210
+ .ra-shell .ra-tab[aria-selected=true] {
211
+ background: hsl(var(--ra-surface));
212
+ color: hsl(var(--ra-text));
213
+ box-shadow: var(--ra-card-shadow);
214
+ font-weight: var(--ra-title-weight);
215
+ }
216
+ .ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {
217
+ color: hsl(var(--ra-accent));
218
+ }
219
+ .ra-shell .ra-tab[disabled] {
220
+ opacity: .5;
221
+ cursor: not-allowed;
222
+ }
223
+ .ra-shell .ra-tab-count {
224
+ display: inline-flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ min-width: 1.25rem;
228
+ padding: 0 0.35rem;
229
+ height: 1.1rem;
230
+ border-radius: 999px;
231
+ background: hsl(var(--ra-accent) / 0.12);
232
+ color: hsl(var(--ra-accent));
233
+ font-size: 0.625rem;
234
+ font-weight: 600;
235
+ line-height: 1;
236
+ }
237
+ .ra-shell .ra-tab[aria-selected=false] .ra-tab-count {
238
+ background: hsl(var(--ra-muted-text) / 0.15);
239
+ color: hsl(var(--ra-muted-text));
240
+ }
241
+ .ra-shell[data-density=compact] .ra-row {
242
+ padding-block: 0.4rem;
243
+ }
244
+ .ra-shell[data-density=compact] .ra-header {
245
+ padding: 0.75rem 1rem;
246
+ }
247
+ .ra-shell[data-density=compact] .ra-header-icon {
248
+ width: 2.25rem;
249
+ height: 2.25rem;
250
+ }
251
+ .ra-shell .ra-row {
252
+ display: flex;
253
+ align-items: center;
254
+ gap: 0.65rem;
255
+ width: 100%;
256
+ text-align: left;
257
+ padding: 0.65rem 0.85rem;
258
+ border-left: 3px solid transparent;
259
+ background: transparent;
260
+ border-bottom: 1px solid transparent;
261
+ transition: background .12s ease, border-color .12s ease;
262
+ cursor: pointer;
263
+ color: hsl(var(--ra-text));
264
+ font-family: inherit;
265
+ }
266
+ .ra-shell .ra-row + .ra-row {
267
+ border-top: 1px solid hsl(var(--ra-border) / 0.6);
268
+ }
269
+ .ra-shell .ra-row:hover {
270
+ background: var(--ra-row-hover);
271
+ }
272
+ .ra-shell .ra-row[data-selected=true] {
273
+ background: var(--ra-row-active-bg);
274
+ border-left-color: var(--ra-row-active-bd);
275
+ }
276
+ .ra-shell .ra-row-icon {
277
+ display: inline-flex;
278
+ align-items: center;
279
+ justify-content: center;
280
+ width: 1.75rem;
281
+ height: 1.75rem;
282
+ border-radius: calc(var(--ra-radius) * 0.6);
283
+ background: hsl(var(--ra-muted));
284
+ color: hsl(var(--ra-muted-text));
285
+ flex-shrink: 0;
286
+ }
287
+ .ra-shell .ra-row[data-selected=true] .ra-row-icon {
288
+ background: hsl(var(--ra-accent) / 0.15);
289
+ color: hsl(var(--ra-accent));
290
+ }
291
+ .ra-shell .ra-row-body {
292
+ flex: 1;
293
+ min-width: 0;
294
+ }
295
+ .ra-shell .ra-row-title {
296
+ font-weight: var(--ra-title-weight);
297
+ font-size: 0.875rem;
298
+ line-height: 1.25;
299
+ color: hsl(var(--ra-text));
300
+ white-space: nowrap;
301
+ overflow: hidden;
302
+ text-overflow: ellipsis;
303
+ }
304
+ .ra-shell .ra-row-sub {
305
+ font-size: 0.75rem;
306
+ color: hsl(var(--ra-muted-text));
307
+ margin-top: 0.15rem;
308
+ white-space: nowrap;
309
+ overflow: hidden;
310
+ text-overflow: ellipsis;
311
+ }
312
+ .ra-shell .ra-row-actions {
313
+ display: inline-flex;
314
+ align-items: center;
315
+ gap: 0.15rem;
316
+ margin-left: auto;
317
+ opacity: 0;
318
+ transition: opacity .15s ease;
319
+ }
320
+ .ra-shell .ra-row:hover .ra-row-actions,
321
+ .ra-shell .ra-row:focus-within .ra-row-actions {
322
+ opacity: 1;
323
+ }
324
+ .ra-shell .ra-row-action {
325
+ width: 1.6rem;
326
+ height: 1.6rem;
327
+ display: inline-flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ border-radius: 999px;
331
+ background: transparent;
332
+ color: hsl(var(--ra-muted-text));
333
+ border: 0;
334
+ cursor: pointer;
335
+ transition: background .15s ease, color .15s ease;
336
+ }
337
+ .ra-shell .ra-row-action:hover {
338
+ background: hsl(var(--ra-accent) / 0.10);
339
+ color: hsl(var(--ra-text));
340
+ }
341
+ .ra-shell .ra-row-action[data-tone=danger]:hover {
342
+ background: hsl(var(--ra-danger) / 0.12);
343
+ color: hsl(var(--ra-danger));
344
+ }
345
+ .ra-shell .ra-chip {
346
+ display: inline-flex;
347
+ align-items: center;
348
+ gap: 0.3rem;
349
+ padding: 0.15rem 0.5rem;
350
+ border-radius: 999px;
351
+ font-size: 0.6875rem;
352
+ font-weight: 500;
353
+ background: hsl(var(--ra-muted));
354
+ color: hsl(var(--ra-muted-text));
355
+ border: 1px solid hsl(var(--ra-border));
356
+ white-space: nowrap;
357
+ max-width: 14rem;
358
+ overflow: hidden;
359
+ text-overflow: ellipsis;
360
+ }
361
+ .ra-shell .ra-chip[data-tone=success] {
362
+ background: hsl(var(--ra-success) / 0.12);
363
+ color: hsl(var(--ra-success));
364
+ border-color: hsl(var(--ra-success) / 0.30);
365
+ }
366
+ .ra-shell .ra-chip[data-tone=warning] {
367
+ background: hsl(var(--ra-warning) / 0.14);
368
+ color: hsl(var(--ra-warning));
369
+ border-color: hsl(var(--ra-warning) / 0.35);
370
+ }
371
+ .ra-shell .ra-chip[data-tone=info] {
372
+ background: hsl(var(--ra-info) / 0.10);
373
+ color: hsl(var(--ra-info));
374
+ border-color: hsl(var(--ra-info) / 0.30);
375
+ }
376
+ .ra-shell .ra-chip[data-tone=danger] {
377
+ background: hsl(var(--ra-danger) / 0.10);
378
+ color: hsl(var(--ra-danger));
379
+ border-color: hsl(var(--ra-danger) / 0.30);
380
+ }
381
+ .ra-shell .ra-chip[data-tone=muted] {
382
+ background: transparent;
383
+ color: hsl(var(--ra-muted-text));
384
+ border-style: dashed;
385
+ }
386
+ .ra-shell .ra-group {
387
+ border-bottom: 1px solid hsl(var(--ra-border));
388
+ }
389
+ .ra-shell .ra-group:last-child {
390
+ border-bottom: 0;
391
+ }
392
+ .ra-shell .ra-group-summary {
393
+ display: flex;
394
+ align-items: center;
395
+ gap: 0.5rem;
396
+ width: 100%;
397
+ padding: 0.5rem 0.85rem;
398
+ background: hsl(var(--ra-muted) / 0.6);
399
+ font-size: 0.7rem;
400
+ font-weight: 600;
401
+ text-transform: uppercase;
402
+ letter-spacing: 0.04em;
403
+ color: hsl(var(--ra-muted-text));
404
+ border: 0;
405
+ cursor: pointer;
406
+ transition: background .12s ease;
407
+ }
408
+ .ra-shell .ra-group-summary:hover {
409
+ background: hsl(var(--ra-muted));
410
+ }
411
+ .ra-shell .ra-group-summary .ra-group-chevron {
412
+ transition: transform .15s ease;
413
+ }
414
+ .ra-shell .ra-group[data-open=false] .ra-group-chevron {
415
+ transform: rotate(-90deg);
416
+ }
417
+ .ra-shell .ra-group-name {
418
+ flex: 1;
419
+ text-align: left;
420
+ }
421
+ .ra-shell .ra-group-count {
422
+ font-size: 0.65rem;
423
+ font-weight: 600;
424
+ color: hsl(var(--ra-muted-text));
425
+ background: hsl(var(--ra-surface));
426
+ border: 1px solid hsl(var(--ra-border));
427
+ border-radius: 999px;
428
+ padding: 0.05rem 0.4rem;
429
+ }
430
+ .ra-shell .ra-group[data-open=false] .ra-group-body {
431
+ display: none;
432
+ }
433
+ .ra-shell .ra-empty {
434
+ display: flex;
435
+ flex-direction: column;
436
+ align-items: center;
437
+ justify-content: center;
438
+ text-align: center;
439
+ padding: 2.5rem 1.5rem;
440
+ gap: 0.75rem;
441
+ }
442
+ .ra-shell .ra-empty-icon {
443
+ display: inline-flex;
444
+ align-items: center;
445
+ justify-content: center;
446
+ width: 3.25rem;
447
+ height: 3.25rem;
448
+ border-radius: 999px;
37
449
  background: hsl(var(--ra-accent) / 0.08);
38
- border-color: hsl(var(--ra-accent) / 0.4) !important;
450
+ color: hsl(var(--ra-accent));
451
+ margin-bottom: 0.25rem;
452
+ }
453
+ .ra-shell .ra-empty-title {
454
+ font-family: var(--ra-font-display);
455
+ font-weight: var(--ra-display-weight);
456
+ font-size: 1rem;
457
+ color: hsl(var(--ra-text));
458
+ margin: 0;
459
+ letter-spacing: -0.01em;
460
+ }
461
+ .ra-shell .ra-empty-body {
462
+ font-size: 0.8125rem;
463
+ color: hsl(var(--ra-muted-text));
464
+ max-width: 22rem;
465
+ line-height: 1.45;
466
+ }
467
+ .ra-shell .ra-empty-actions {
468
+ display: flex;
469
+ align-items: center;
470
+ gap: 0.5rem;
471
+ margin-top: 0.25rem;
472
+ flex-wrap: wrap;
473
+ justify-content: center;
474
+ }
475
+ .ra-shell .ra-btn {
476
+ display: inline-flex;
477
+ align-items: center;
478
+ gap: 0.4rem;
479
+ padding: 0.45rem 0.85rem;
480
+ border-radius: calc(var(--ra-radius) * 0.7);
481
+ font-size: 0.8125rem;
482
+ font-weight: 500;
483
+ border: 1px solid hsl(var(--ra-border));
484
+ background: hsl(var(--ra-surface));
485
+ color: hsl(var(--ra-text));
486
+ cursor: pointer;
487
+ transition:
488
+ background .15s ease,
489
+ border-color .15s ease,
490
+ box-shadow .15s ease,
491
+ transform .1s ease;
492
+ }
493
+ .ra-shell .ra-btn:hover {
494
+ background: hsl(var(--ra-muted));
495
+ box-shadow: var(--ra-card-shadow);
496
+ }
497
+ .ra-shell .ra-btn:active {
498
+ transform: translateY(1px);
499
+ }
500
+ .ra-shell .ra-btn[data-variant=primary] {
501
+ background: hsl(var(--ra-accent));
502
+ color: hsl(var(--ra-surface));
503
+ border-color: hsl(var(--ra-accent));
504
+ }
505
+ .ra-shell .ra-btn[data-variant=primary]:hover {
506
+ background: hsl(var(--ra-accent) / 0.92);
507
+ }
508
+ .ra-shell .ra-btn[data-variant=ghost] {
509
+ background: transparent;
510
+ border-color: transparent;
511
+ color: hsl(var(--ra-muted-text));
512
+ }
513
+ .ra-shell .ra-btn[data-variant=ghost]:hover {
514
+ background: hsl(var(--ra-muted));
515
+ color: hsl(var(--ra-text));
516
+ }
517
+ .ra-shell .ra-btn[data-variant=danger] {
518
+ color: hsl(var(--ra-danger));
519
+ }
520
+ .ra-shell .ra-btn[data-variant=danger]:hover {
521
+ background: hsl(var(--ra-danger) / 0.10);
522
+ border-color: hsl(var(--ra-danger) / 0.40);
523
+ }
524
+ .ra-shell .ra-intro {
525
+ position: relative;
526
+ display: flex;
527
+ gap: 0.85rem;
528
+ padding: 0.9rem 1rem;
529
+ border-radius: var(--ra-radius);
530
+ border: 1px solid hsl(var(--ra-info) / 0.30);
531
+ background: hsl(var(--ra-info) / 0.08);
532
+ margin-bottom: 1rem;
533
+ }
534
+ .ra-shell .ra-intro[data-tone=success] {
535
+ border-color: hsl(var(--ra-success) / 0.30);
536
+ background: hsl(var(--ra-success) / 0.08);
537
+ }
538
+ .ra-shell .ra-intro[data-tone=warning] {
539
+ border-color: hsl(var(--ra-warning) / 0.35);
540
+ background: hsl(var(--ra-warning) / 0.10);
541
+ }
542
+ .ra-shell .ra-intro-icon {
543
+ flex-shrink: 0;
544
+ width: 2rem;
545
+ height: 2rem;
546
+ border-radius: 999px;
547
+ display: inline-flex;
548
+ align-items: center;
549
+ justify-content: center;
550
+ background: hsl(var(--ra-info) / 0.18);
551
+ color: hsl(var(--ra-info));
552
+ }
553
+ .ra-shell .ra-intro[data-tone=success] .ra-intro-icon {
554
+ background: hsl(var(--ra-success) / 0.18);
555
+ color: hsl(var(--ra-success));
556
+ }
557
+ .ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {
558
+ background: hsl(var(--ra-warning) / 0.20);
559
+ color: hsl(var(--ra-warning));
560
+ }
561
+ .ra-shell .ra-intro-body {
562
+ flex: 1;
563
+ min-width: 0;
564
+ }
565
+ .ra-shell .ra-intro-title {
566
+ font-family: var(--ra-font-display);
567
+ font-weight: var(--ra-title-weight);
568
+ font-size: 0.875rem;
569
+ color: hsl(var(--ra-text));
570
+ margin: 0 0 0.2rem 0;
571
+ }
572
+ .ra-shell .ra-intro-text {
573
+ font-size: 0.8125rem;
574
+ color: hsl(var(--ra-text) / 0.85);
575
+ line-height: 1.45;
576
+ }
577
+ .ra-shell .ra-intro-dismiss {
578
+ position: absolute;
579
+ top: 0.5rem;
580
+ right: 0.5rem;
581
+ width: 1.6rem;
582
+ height: 1.6rem;
583
+ border-radius: 999px;
584
+ display: inline-flex;
585
+ align-items: center;
586
+ justify-content: center;
587
+ background: transparent;
588
+ border: 0;
589
+ color: hsl(var(--ra-muted-text));
590
+ cursor: pointer;
591
+ }
592
+ .ra-shell .ra-intro-dismiss:hover {
593
+ background: hsl(var(--ra-text) / 0.06);
594
+ color: hsl(var(--ra-text));
595
+ }
596
+ .ra-shell .ra-bulk-menu {
597
+ min-width: 12rem;
598
+ background: hsl(var(--ra-surface));
599
+ border: 1px solid hsl(var(--ra-border));
600
+ border-radius: calc(var(--ra-radius) * 0.85);
601
+ box-shadow: var(--ra-card-shadow-hover);
602
+ padding: 0.3rem;
603
+ z-index: 30;
604
+ }
605
+ .ra-shell .ra-bulk-item {
606
+ display: flex;
607
+ align-items: center;
608
+ gap: 0.55rem;
609
+ width: 100%;
610
+ padding: 0.45rem 0.6rem;
611
+ border-radius: calc(var(--ra-radius) * 0.6);
612
+ font-size: 0.8125rem;
613
+ color: hsl(var(--ra-text));
614
+ background: transparent;
615
+ border: 0;
616
+ cursor: pointer;
617
+ text-align: left;
618
+ transition: background .12s ease, color .12s ease;
619
+ }
620
+ .ra-shell .ra-bulk-item:hover {
621
+ background: hsl(var(--ra-muted));
622
+ }
623
+ .ra-shell .ra-bulk-item[data-tone=danger] {
624
+ color: hsl(var(--ra-danger));
625
+ }
626
+ .ra-shell .ra-bulk-item[data-tone=danger]:hover {
627
+ background: hsl(var(--ra-danger) / 0.10);
628
+ }
629
+ .ra-shell .ra-bulk-divider {
630
+ height: 1px;
631
+ background: hsl(var(--ra-border));
632
+ margin: 0.25rem 0;
633
+ }
634
+ .ra-shell .ra-preview-rail {
635
+ background: hsl(var(--ra-surface));
636
+ border-left: 1px solid hsl(var(--ra-border));
637
+ box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);
638
+ display: flex;
639
+ flex-direction: column;
640
+ height: 100%;
641
+ overflow: hidden;
642
+ }
643
+ .ra-shell .ra-preview-rail-header {
644
+ position: sticky;
645
+ top: 0;
646
+ z-index: 1;
647
+ display: flex;
648
+ align-items: center;
649
+ gap: 0.5rem;
650
+ padding: 0.75rem 1rem;
651
+ background:
652
+ linear-gradient(
653
+ 180deg,
654
+ hsl(var(--ra-surface)) 0%,
655
+ hsl(var(--ra-surface) / 0.92) 100%);
656
+ border-bottom: 1px solid hsl(var(--ra-border));
657
+ backdrop-filter: blur(6px);
658
+ }
659
+ .ra-shell .ra-preview-rail-title {
660
+ display: inline-flex;
661
+ align-items: center;
662
+ gap: 0.4rem;
663
+ font-size: 0.7rem;
664
+ font-weight: 600;
665
+ text-transform: uppercase;
666
+ letter-spacing: 0.06em;
667
+ color: hsl(var(--ra-muted-text));
668
+ }
669
+ .ra-shell .ra-preview-rail-body {
670
+ flex: 1;
671
+ overflow-y: auto;
672
+ padding: 1rem;
39
673
  }
40
674
  /*# sourceMappingURL=index.css.map */