@dragcraft/themes 0.0.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.
@@ -0,0 +1,1700 @@
1
+ .dc-designer, .dc-designer__body, .dc-designer__panel, .dc-left-sidebar, .dc-right-sidebar, .dc-left-sidebar__surface, .dc-right-sidebar__surface, .dc-left-sidebar__rail, .dc-right-sidebar__rail, .dc-sidebar-rail__extension, .dc-left-sidebar__tab, .dc-right-sidebar__tab, .dc-left-sidebar__content, .dc-right-sidebar__content, .dc-sidebar-toggle, .dc-workspace-backdrop, .dc-material-panel, .dc-material-panel__header, .dc-material-panel__search, .dc-material-panel__search-input, .dc-material-panel__search-clear, .dc-material-panel__groups, .dc-material-group__header, .dc-material-group__body, .dc-material-item, .dc-material-item__icon, .dc-material-item__thumbnail, .dc-material-item__content, .dc-material-item__title, .dc-structure-panel, .dc-structure-panel__header, .dc-structure-panel__list, .dc-structure-panel__item, .dc-structure-panel__select, .dc-structure-panel__main, .dc-structure-panel__actions, .dc-structure-panel__action, .dc-structure-panel__region, .dc-structure-panel__empty, .dc-property-panel, .dc-property-panel__content, .dc-property-panel__empty, .dc-canvas, .dc-canvas-controls, .dc-canvas-controls__history, .dc-canvas-controls__button, .dc-canvas__viewport, .dc-canvas__stage, .dc-canvas__content, .dc-canvas__interaction-layer {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ .dc-designer__panel--left, .dc-designer__panel--right, .dc-left-sidebar__rail, .dc-right-sidebar__rail, .dc-left-sidebar__tab, .dc-right-sidebar__tab, .dc-material-panel__search-input, .dc-material-item, .dc-structure-panel__item, .dc-canvas-controls__history, .dc-canvas-controls__button {
6
+ border: 1px solid #0000;
7
+ }
8
+
9
+ .dc-sidebar-rail__extension {
10
+ border-top: 1px solid #0000;
11
+ }
12
+
13
+ .dc-designer {
14
+ isolation: isolate;
15
+ flex: auto;
16
+ width: 100%;
17
+ min-width: 0;
18
+ height: 100%;
19
+ min-height: 0;
20
+ display: block;
21
+ position: relative;
22
+ overflow: hidden;
23
+ }
24
+
25
+ .dc-designer__body {
26
+ min-width: 0;
27
+ height: 100%;
28
+ min-height: 0;
29
+ display: grid;
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .dc-designer--wide .dc-designer__body {
35
+ grid-template-columns: var(--_dc-workspace-left-width)
36
+ minmax(0, 1fr)
37
+ var(--_dc-workspace-right-width);
38
+ }
39
+
40
+ .dc-designer--wide:not(.dc-designer--left-open) .dc-designer__body {
41
+ grid-template-columns: var(--_dc-workspace-rail-width)
42
+ minmax(0, 1fr)
43
+ var(--_dc-workspace-right-width);
44
+ }
45
+
46
+ .dc-designer--wide:not(.dc-designer--right-open) .dc-designer__body {
47
+ grid-template-columns: var(--_dc-workspace-left-width)
48
+ minmax(0, 1fr)
49
+ var(--_dc-workspace-rail-width);
50
+ }
51
+
52
+ .dc-designer--wide:not(.dc-designer--left-open):not(.dc-designer--right-open) .dc-designer__body {
53
+ grid-template-columns: var(--_dc-workspace-rail-width)
54
+ minmax(0, 1fr)
55
+ var(--_dc-workspace-rail-width);
56
+ }
57
+
58
+ .dc-designer__panel {
59
+ min-width: 0;
60
+ min-height: 0;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .dc-designer__panel--left, .dc-designer__panel--right {
65
+ z-index: 800;
66
+ position: relative;
67
+ overflow: visible;
68
+ }
69
+
70
+ .dc-designer__panel--left {
71
+ border-width: 0 1px 0 0;
72
+ }
73
+
74
+ .dc-designer__panel--right {
75
+ border-width: 0 0 0 1px;
76
+ }
77
+
78
+ .dc-designer__panel--center {
79
+ z-index: 1;
80
+ position: relative;
81
+ }
82
+
83
+ .dc-left-sidebar, .dc-right-sidebar {
84
+ width: 100%;
85
+ min-width: 0;
86
+ height: 100%;
87
+ position: relative;
88
+ }
89
+
90
+ .dc-left-sidebar__surface, .dc-right-sidebar__surface {
91
+ width: 100%;
92
+ min-width: 0;
93
+ height: 100%;
94
+ display: grid;
95
+ overflow: hidden;
96
+ }
97
+
98
+ .dc-left-sidebar__surface {
99
+ grid-template-columns: var(--_dc-workspace-rail-width) minmax(0, 1fr);
100
+ }
101
+
102
+ .dc-right-sidebar__surface {
103
+ grid-template-columns: minmax(0, 1fr) var(--_dc-workspace-rail-width);
104
+ }
105
+
106
+ .dc-left-sidebar__rail, .dc-right-sidebar__rail {
107
+ width: var(--_dc-workspace-rail-width);
108
+ flex-direction: column;
109
+ align-items: center;
110
+ gap: 4px;
111
+ padding: 8px 6px;
112
+ display: flex;
113
+ }
114
+
115
+ .dc-left-sidebar__rail {
116
+ border-width: 0 1px 0 0;
117
+ }
118
+
119
+ .dc-right-sidebar__rail {
120
+ border-width: 0 0 0 1px;
121
+ grid-area: 1 / 2;
122
+ }
123
+
124
+ .dc-sidebar-rail__extension {
125
+ flex-direction: column;
126
+ align-items: center;
127
+ gap: 4px;
128
+ width: 100%;
129
+ margin-top: 4px;
130
+ padding-top: 8px;
131
+ display: flex;
132
+ }
133
+
134
+ .dc-left-sidebar__tab, .dc-right-sidebar__tab {
135
+ width: var(--dc-control-height-sm, 28px);
136
+ height: var(--dc-control-height-sm, 28px);
137
+ cursor: pointer;
138
+ justify-content: center;
139
+ align-items: center;
140
+ padding: 0;
141
+ display: inline-flex;
142
+ }
143
+
144
+ .dc-right-sidebar__tab:disabled {
145
+ cursor: not-allowed;
146
+ }
147
+
148
+ .dc-left-sidebar__content, .dc-right-sidebar__content {
149
+ min-width: 0;
150
+ height: 100%;
151
+ overflow: hidden;
152
+ }
153
+
154
+ .dc-right-sidebar__content {
155
+ grid-area: 1 / 1;
156
+ }
157
+
158
+ .dc-designer--wide:not(.dc-designer--left-open) .dc-left-sidebar__surface {
159
+ grid-template-columns: var(--_dc-workspace-rail-width) 0;
160
+ }
161
+
162
+ .dc-designer--wide:not(.dc-designer--left-open) .dc-left-sidebar__content, .dc-designer--wide:not(.dc-designer--right-open) .dc-right-sidebar__content {
163
+ visibility: hidden;
164
+ }
165
+
166
+ .dc-designer--wide:not(.dc-designer--right-open) .dc-right-sidebar__surface {
167
+ grid-template-columns: 0 var(--_dc-workspace-rail-width);
168
+ }
169
+
170
+ .dc-sidebar-toggle {
171
+ z-index: 6;
172
+ cursor: pointer;
173
+ border: 0;
174
+ justify-content: center;
175
+ align-items: center;
176
+ width: 18px;
177
+ height: 58px;
178
+ padding: 0;
179
+ display: flex;
180
+ position: absolute;
181
+ top: 50%;
182
+ transform: translateY(-50%);
183
+ }
184
+
185
+ .dc-sidebar-toggle--left {
186
+ right: -17px;
187
+ }
188
+
189
+ .dc-sidebar-toggle--right {
190
+ left: -17px;
191
+ }
192
+
193
+ .dc-designer--compact .dc-designer__body {
194
+ grid-template-columns: minmax(0, 1fr);
195
+ }
196
+
197
+ .dc-designer--compact .dc-designer__panel--center {
198
+ grid-area: 1 / 1;
199
+ }
200
+
201
+ .dc-designer--compact .dc-designer__panel--left, .dc-designer--compact .dc-designer__panel--right {
202
+ z-index: 802;
203
+ width: min(var(--_dc-workspace-drawer-width), calc(100% - 48px));
204
+ max-width: 100%;
205
+ position: absolute;
206
+ top: 0;
207
+ bottom: 0;
208
+ }
209
+
210
+ .dc-designer--compact .dc-designer__panel--left {
211
+ left: 0;
212
+ transform: translateX(-100%);
213
+ }
214
+
215
+ .dc-designer--compact .dc-designer__panel--right {
216
+ right: 0;
217
+ transform: translateX(100%);
218
+ }
219
+
220
+ .dc-designer--compact .dc-designer__panel--open {
221
+ transform: translateX(0);
222
+ }
223
+
224
+ .dc-workspace-backdrop {
225
+ z-index: 801;
226
+ cursor: default;
227
+ border: 0;
228
+ padding: 0;
229
+ position: absolute;
230
+ inset: 0;
231
+ }
232
+
233
+ .dc-material-panel, .dc-structure-panel, .dc-property-panel {
234
+ flex-direction: column;
235
+ min-width: 0;
236
+ height: 100%;
237
+ display: flex;
238
+ overflow: hidden;
239
+ }
240
+
241
+ .dc-material-panel__header, .dc-structure-panel__header {
242
+ flex: none;
243
+ align-items: center;
244
+ height: 48px;
245
+ padding: 0 14px;
246
+ display: flex;
247
+ }
248
+
249
+ .dc-material-panel__heading {
250
+ margin: 0;
251
+ }
252
+
253
+ .dc-material-panel__search {
254
+ flex: none;
255
+ align-items: center;
256
+ margin: 0 12px 10px;
257
+ display: flex;
258
+ position: relative;
259
+ }
260
+
261
+ .dc-material-panel__search-icon {
262
+ z-index: 1;
263
+ pointer-events: none;
264
+ position: absolute;
265
+ left: 9px;
266
+ }
267
+
268
+ .dc-material-panel__search-input {
269
+ width: 100%;
270
+ height: var(--dc-control-height-md, 32px);
271
+ padding: 0 30px;
272
+ }
273
+
274
+ .dc-material-panel__search-clear {
275
+ cursor: pointer;
276
+ border: 0;
277
+ justify-content: center;
278
+ align-items: center;
279
+ width: 24px;
280
+ height: 24px;
281
+ padding: 0;
282
+ display: inline-flex;
283
+ position: absolute;
284
+ right: 4px;
285
+ }
286
+
287
+ .dc-material-panel__groups {
288
+ flex: 1;
289
+ min-height: 0;
290
+ padding: 0 8px 12px;
291
+ overflow: hidden auto;
292
+ }
293
+
294
+ .dc-material-group + .dc-material-group {
295
+ margin-top: 4px;
296
+ }
297
+
298
+ .dc-material-group__header {
299
+ cursor: pointer;
300
+ border: 0;
301
+ justify-content: space-between;
302
+ align-items: center;
303
+ width: 100%;
304
+ min-height: 34px;
305
+ padding: 0 6px;
306
+ display: flex;
307
+ }
308
+
309
+ .dc-material-group__title, .dc-material-item__title, .dc-structure-panel__title, .dc-structure-panel__id, .dc-structure-panel__region-title {
310
+ text-overflow: ellipsis;
311
+ white-space: nowrap;
312
+ overflow: hidden;
313
+ }
314
+
315
+ .dc-material-group__toggle {
316
+ flex: none;
317
+ display: inline-flex;
318
+ }
319
+
320
+ .dc-material-group__toggle--collapsed {
321
+ transform: rotate(-90deg);
322
+ }
323
+
324
+ .dc-material-group__body {
325
+ grid-template-columns: repeat(2, minmax(0, 1fr));
326
+ gap: 8px;
327
+ min-width: 0;
328
+ padding: 4px 4px 10px;
329
+ display: grid;
330
+ }
331
+
332
+ .dc-material-item {
333
+ cursor: grab;
334
+ user-select: none;
335
+ flex-direction: column;
336
+ justify-content: center;
337
+ align-items: center;
338
+ gap: 7px;
339
+ width: 100%;
340
+ min-width: 0;
341
+ min-height: 72px;
342
+ padding: 9px 6px;
343
+ display: flex;
344
+ overflow: hidden;
345
+ }
346
+
347
+ .dc-material-item:active {
348
+ cursor: grabbing;
349
+ }
350
+
351
+ .dc-material-item__icon {
352
+ width: var(--dc-control-height-sm, 28px);
353
+ height: var(--dc-control-height-sm, 28px);
354
+ flex: none;
355
+ justify-content: center;
356
+ align-items: center;
357
+ display: inline-flex;
358
+ overflow: hidden;
359
+ }
360
+
361
+ .dc-material-item__thumbnail {
362
+ object-fit: cover;
363
+ width: 40px;
364
+ height: 30px;
365
+ }
366
+
367
+ .dc-material-item__content, .dc-material-item__title {
368
+ width: 100%;
369
+ min-width: 0;
370
+ }
371
+
372
+ .dc-material-item__title {
373
+ text-align: center;
374
+ display: block;
375
+ }
376
+
377
+ .dc-structure-panel__list {
378
+ flex: 1;
379
+ min-height: 0;
380
+ padding: 4px 8px 12px;
381
+ overflow-y: auto;
382
+ }
383
+
384
+ .dc-structure-panel__row {
385
+ min-width: 0;
386
+ }
387
+
388
+ .dc-structure-panel__item {
389
+ align-items: center;
390
+ width: 100%;
391
+ min-height: 42px;
392
+ padding: 3px;
393
+ display: flex;
394
+ }
395
+
396
+ .dc-structure-panel__select {
397
+ text-align: left;
398
+ cursor: pointer;
399
+ border: 0;
400
+ flex: 1;
401
+ align-items: center;
402
+ gap: 8px;
403
+ min-width: 0;
404
+ min-height: 34px;
405
+ padding: 3px;
406
+ display: flex;
407
+ }
408
+
409
+ .dc-structure-panel__branch {
410
+ flex: none;
411
+ width: 13px;
412
+ height: 20px;
413
+ }
414
+
415
+ .dc-structure-panel__main {
416
+ flex-direction: column;
417
+ flex: 1;
418
+ gap: 1px;
419
+ min-width: 0;
420
+ display: flex;
421
+ }
422
+
423
+ .dc-structure-panel__title, .dc-structure-panel__id {
424
+ display: block;
425
+ }
426
+
427
+ .dc-structure-panel__actions {
428
+ flex: none;
429
+ align-items: center;
430
+ display: flex;
431
+ }
432
+
433
+ .dc-structure-panel__action {
434
+ width: 28px;
435
+ height: var(--dc-control-height-sm, 28px);
436
+ cursor: pointer;
437
+ border: 0;
438
+ flex: none;
439
+ justify-content: center;
440
+ align-items: center;
441
+ padding: 0;
442
+ display: inline-flex;
443
+ }
444
+
445
+ .dc-structure-panel__action:disabled {
446
+ cursor: not-allowed;
447
+ }
448
+
449
+ .dc-structure-panel__region {
450
+ grid-template-columns: 16px minmax(0, 1fr) auto;
451
+ align-items: center;
452
+ min-height: 28px;
453
+ padding-inline: 20px 8px;
454
+ display: grid;
455
+ }
456
+
457
+ .dc-structure-panel__region-branch-mark {
458
+ width: 9px;
459
+ height: 14px;
460
+ }
461
+
462
+ .dc-structure-panel__region-count {
463
+ text-align: end;
464
+ min-width: 16px;
465
+ }
466
+
467
+ .dc-structure-panel__children {
468
+ padding-inline-start: 16px;
469
+ }
470
+
471
+ .dc-structure-panel__empty, .dc-property-panel__empty {
472
+ text-align: center;
473
+ justify-content: center;
474
+ align-items: center;
475
+ display: flex;
476
+ }
477
+
478
+ .dc-structure-panel__empty {
479
+ flex: 1;
480
+ padding: 16px;
481
+ }
482
+
483
+ .dc-property-panel__content {
484
+ flex: 1;
485
+ min-height: 0;
486
+ padding: 8px 0 16px;
487
+ overflow-y: auto;
488
+ }
489
+
490
+ .dc-property-panel__empty {
491
+ min-height: 120px;
492
+ }
493
+
494
+ .dc-canvas {
495
+ min-width: 0;
496
+ height: 100%;
497
+ min-height: 0;
498
+ position: relative;
499
+ overflow: hidden;
500
+ }
501
+
502
+ .dc-canvas-controls {
503
+ z-index: 100;
504
+ pointer-events: none;
505
+ min-width: 0;
506
+ position: absolute;
507
+ inset: 0;
508
+ }
509
+
510
+ .dc-canvas-controls__history {
511
+ pointer-events: auto;
512
+ align-items: center;
513
+ gap: 2px;
514
+ padding: 3px;
515
+ display: inline-flex;
516
+ position: absolute;
517
+ top: 12px;
518
+ left: 12px;
519
+ }
520
+
521
+ .dc-canvas-controls__button {
522
+ width: var(--dc-control-height-sm, 28px);
523
+ height: var(--dc-control-height-sm, 28px);
524
+ cursor: pointer;
525
+ justify-content: center;
526
+ align-items: center;
527
+ padding: 0;
528
+ display: inline-flex;
529
+ }
530
+
531
+ .dc-canvas-controls__divider {
532
+ width: 1px;
533
+ height: 18px;
534
+ margin: 0 2px;
535
+ }
536
+
537
+ .dc-canvas-controls__button:disabled {
538
+ cursor: not-allowed;
539
+ }
540
+
541
+ .dc-canvas__viewport {
542
+ position: absolute;
543
+ inset: 0;
544
+ overflow: hidden;
545
+ }
546
+
547
+ .dc-canvas__stage {
548
+ width: max-content;
549
+ height: max-content;
550
+ transform: translate3d(-50%, -50%, 0)
551
+ translate3d(var(--_dc-canvas-pan-x, 0px), var(--_dc-canvas-pan-y, 0px), 0)
552
+ translate3d(var(--_dc-canvas-snap-x, 0px), var(--_dc-canvas-snap-y, 0px), 0);
553
+ transform-origin: center;
554
+ will-change: transform;
555
+ position: absolute;
556
+ top: 50%;
557
+ left: 50%;
558
+ }
559
+
560
+ .dc-canvas__content {
561
+ width: max-content;
562
+ min-width: 375px;
563
+ min-height: 200px;
564
+ display: block;
565
+ }
566
+
567
+ .dc-canvas__content--bounded {
568
+ min-width: 0;
569
+ }
570
+
571
+ .dc-canvas--hand .dc-canvas__viewport, .dc-canvas--hand .dc-canvas__viewport * {
572
+ cursor: grab;
573
+ }
574
+
575
+ .dc-canvas--hand .dc-canvas__viewport {
576
+ touch-action: none;
577
+ }
578
+
579
+ .dc-canvas--panning .dc-canvas__viewport, .dc-canvas--panning .dc-canvas__viewport * {
580
+ cursor: grabbing;
581
+ user-select: none;
582
+ }
583
+
584
+ .dc-canvas__content > .dc-root-renderer {
585
+ width: max-content;
586
+ min-width: 375px;
587
+ min-height: 200px;
588
+ display: flow-root;
589
+ }
590
+
591
+ .dc-canvas__content--bounded > .dc-root-renderer {
592
+ min-width: 0;
593
+ }
594
+
595
+ .dc-canvas__content > .dc-root-renderer > [data-dc-toolbar-boundary] {
596
+ margin-block: 0;
597
+ margin-inline: auto;
598
+ }
599
+
600
+ .dc-canvas__interaction-layer {
601
+ z-index: 90;
602
+ pointer-events: none;
603
+ position: absolute;
604
+ inset: 0;
605
+ }
606
+
607
+ .dc-canvas__interaction-layer > * {
608
+ pointer-events: auto;
609
+ }
610
+
611
+ .dc-canvas--forbidden {
612
+ cursor: not-allowed;
613
+ }
614
+
615
+ .dc-root-renderer, .dc-container-shell, .dc-node-selection-plane, .dc-empty-state, .dc-node, .dc-node__mask, .dc-node__handle, .dc-node__handle-surface, .dc-node__handle-icon, .dc-node__handle-anchor, .dc-node__toolbar, .dc-node__toolbar-anchor, .dc-node__toolbar-btn, .dc-node__selection-projection, .dc-node__selection-outline, .dc-node__selection-edge, .dc-drop-indicator, .dc-widget-fallback, .dc-forbidden-overlay, .dc-forbidden-overlay__text {
616
+ box-sizing: border-box;
617
+ }
618
+
619
+ .dc-node__selection-outline {
620
+ border: var(--dc-node-selection-stroke-width, 2px) solid transparent;
621
+ }
622
+
623
+ .dc-drop-indicator {
624
+ border: 2px dashed #0000;
625
+ }
626
+
627
+ .dc-widget-fallback {
628
+ border: 1px dashed #0000;
629
+ }
630
+
631
+ .dc-forbidden-overlay {
632
+ border: 2px dashed #0000;
633
+ }
634
+
635
+ .dc-forbidden-overlay__text {
636
+ border: 1px solid #0000;
637
+ }
638
+
639
+ .dc-root-renderer {
640
+ min-height: 100%;
641
+ position: relative;
642
+ }
643
+
644
+ .dc-container-shell {
645
+ isolation: isolate;
646
+ grid-template-rows: var(--dc-inset-block-start) minmax(0, 1fr) var(--dc-inset-block-end);
647
+ grid-template-columns: var(--dc-inset-inline-start) minmax(0, 1fr) var(--dc-inset-inline-end);
648
+ --dc-sized-inset-block-start: 0px;
649
+ --dc-sized-inset-block-end: 0px;
650
+ --dc-sized-inset-inline-start: 0px;
651
+ --dc-sized-inset-inline-end: 0px;
652
+ --dc-measured-inset-block-start: 0px;
653
+ --dc-measured-inset-block-end: 0px;
654
+ --dc-measured-inset-inline-start: 0px;
655
+ --dc-measured-inset-inline-end: 0px;
656
+ --dc-inset-block-start: calc(var(--dc-sized-inset-block-start) + var(--dc-measured-inset-block-start));
657
+ --dc-inset-block-end: calc(var(--dc-sized-inset-block-end) + var(--dc-measured-inset-block-end));
658
+ --dc-inset-inline-start: calc(var(--dc-sized-inset-inline-start) + var(--dc-measured-inset-inline-start));
659
+ --dc-inset-inline-end: calc(var(--dc-sized-inset-inline-end) + var(--dc-measured-inset-inline-end));
660
+ min-height: 200px;
661
+ display: grid;
662
+ position: relative;
663
+ }
664
+
665
+ .dc-node-selection-plane {
666
+ z-index: 40;
667
+ pointer-events: none;
668
+ position: absolute;
669
+ inset: 0;
670
+ overflow: hidden;
671
+ }
672
+
673
+ .dc-container-shell--empty {
674
+ min-height: 200px;
675
+ }
676
+
677
+ .dc-container-shell__content {
678
+ grid-area: 2 / 2;
679
+ min-width: 0;
680
+ min-height: 0;
681
+ overflow: auto;
682
+ }
683
+
684
+ .dc-container-shell__content-layout {
685
+ flex-direction: column;
686
+ min-height: 100%;
687
+ display: flex;
688
+ position: relative;
689
+ }
690
+
691
+ .dc-container-shell__content-row {
692
+ flex: 1 0 auto;
693
+ grid-template-columns: max-content minmax(0, 1fr) max-content;
694
+ min-width: 0;
695
+ min-height: 100%;
696
+ display: grid;
697
+ }
698
+
699
+ .dc-container-shell__content-edge--inline-start {
700
+ grid-column: 1;
701
+ min-width: 0;
702
+ }
703
+
704
+ .dc-container-shell__content-surface {
705
+ box-sizing: border-box;
706
+ grid-column: 2;
707
+ min-width: 0;
708
+ min-height: 100%;
709
+ position: relative;
710
+ }
711
+
712
+ .dc-container-shell__content-edge--inline-end {
713
+ grid-column: 3;
714
+ min-width: 0;
715
+ }
716
+
717
+ .dc-container-shell--empty > .dc-container-shell__content, .dc-container-shell--empty .dc-container-shell__content-layout, .dc-container-shell--empty .dc-container-shell__content-row, .dc-container-shell--empty .dc-container-shell__content-surface {
718
+ min-height: inherit;
719
+ }
720
+
721
+ .dc-container-shell--empty .dc-container-shell__content-surface {
722
+ justify-content: center;
723
+ align-items: center;
724
+ display: flex;
725
+ }
726
+
727
+ .dc-container-shell__layer-item--self > [data-dc-component="node"] {
728
+ pointer-events: none;
729
+ position: absolute;
730
+ inset: 0;
731
+ }
732
+
733
+ .dc-container-shell__layer-item--self > [data-dc-component="node"] > [data-dc-node-surface], .dc-container-shell__layer-item--self > [data-dc-component="node"] > :first-child {
734
+ pointer-events: auto;
735
+ }
736
+
737
+ .dc-empty-state {
738
+ pointer-events: none;
739
+ flex-direction: column;
740
+ justify-content: center;
741
+ align-items: center;
742
+ gap: 8px;
743
+ min-height: 160px;
744
+ display: flex;
745
+ }
746
+
747
+ .dc-empty-state__text {
748
+ pointer-events: none;
749
+ }
750
+
751
+ .dc-node {
752
+ cursor: default;
753
+ position: relative;
754
+ }
755
+
756
+ .dc-node--masked, .dc-node--unmasked {
757
+ position: relative;
758
+ }
759
+
760
+ .dc-node__mask {
761
+ z-index: 10;
762
+ cursor: pointer;
763
+ pointer-events: auto;
764
+ position: absolute;
765
+ inset: 0;
766
+ }
767
+
768
+ .dc-node--unsorted {
769
+ cursor: default;
770
+ }
771
+
772
+ .dc-node__handle {
773
+ cursor: pointer;
774
+ border: 0;
775
+ margin: 0;
776
+ padding: 0;
777
+ }
778
+
779
+ .dc-node__handle-surface, .dc-node__handle-icon {
780
+ justify-content: center;
781
+ align-items: center;
782
+ display: flex;
783
+ }
784
+
785
+ .dc-node__handle-icon {
786
+ pointer-events: none;
787
+ }
788
+
789
+ .dc-node > .dc-node__handle {
790
+ z-index: 20;
791
+ pointer-events: none;
792
+ width: 28px;
793
+ height: 28px;
794
+ position: absolute;
795
+ top: 4px;
796
+ right: 4px;
797
+ }
798
+
799
+ .dc-node > .dc-node__handle > .dc-node__handle-surface {
800
+ position: absolute;
801
+ inset: 2px;
802
+ }
803
+
804
+ .dc-node--hovered > .dc-node__handle, .dc-node > .dc-node__handle:focus-visible {
805
+ pointer-events: auto;
806
+ }
807
+
808
+ .dc-node--selected > .dc-node__handle {
809
+ pointer-events: none;
810
+ }
811
+
812
+ .dc-node__handle:active > .dc-node__handle-surface {
813
+ transform: scale(.94);
814
+ }
815
+
816
+ .dc-node__handle-anchor {
817
+ z-index: 20;
818
+ pointer-events: none;
819
+ will-change: transform;
820
+ width: 32px;
821
+ height: 32px;
822
+ }
823
+
824
+ .dc-node__handle-anchor--visible {
825
+ pointer-events: auto;
826
+ }
827
+
828
+ .dc-node__handle-anchor > .dc-node__handle {
829
+ width: 32px;
830
+ height: 32px;
831
+ position: relative;
832
+ }
833
+
834
+ .dc-node__handle-anchor > .dc-node__handle > .dc-node__handle-surface {
835
+ position: absolute;
836
+ inset: 4px;
837
+ }
838
+
839
+ .dc-node__toolbar {
840
+ z-index: 20;
841
+ flex-direction: column;
842
+ gap: 3px;
843
+ padding: 4px;
844
+ display: flex;
845
+ position: absolute;
846
+ top: 0;
847
+ right: -40px;
848
+ }
849
+
850
+ .dc-node__toolbar--vertical {
851
+ flex-direction: column;
852
+ }
853
+
854
+ .dc-node__toolbar--horizontal {
855
+ flex-flow: row;
856
+ }
857
+
858
+ .dc-node__toolbar-anchor {
859
+ z-index: 20;
860
+ pointer-events: auto;
861
+ will-change: transform;
862
+ overflow: auto;
863
+ }
864
+
865
+ .dc-node__toolbar-anchor[data-orientation="vertical"] {
866
+ overflow: hidden auto;
867
+ }
868
+
869
+ .dc-node__toolbar-anchor[data-orientation="horizontal"] {
870
+ overflow: auto hidden;
871
+ }
872
+
873
+ .dc-node__toolbar-btn {
874
+ cursor: pointer;
875
+ border: 0;
876
+ justify-content: center;
877
+ align-items: center;
878
+ width: 26px;
879
+ height: 26px;
880
+ padding: 0;
881
+ display: flex;
882
+ }
883
+
884
+ .dc-node__toolbar-btn:hover:not(:disabled, .dc-node__toolbar-btn--disabled) {
885
+ transform: translateY(-1px);
886
+ }
887
+
888
+ .dc-node__toolbar-btn:active:not(:disabled, .dc-node__toolbar-btn--disabled) {
889
+ transform: translateY(0);
890
+ }
891
+
892
+ .dc-node__toolbar-btn:disabled, .dc-node__toolbar-btn--disabled {
893
+ cursor: not-allowed;
894
+ pointer-events: none;
895
+ }
896
+
897
+ .dc-node__toolbar-btn--drag {
898
+ cursor: grab;
899
+ }
900
+
901
+ .dc-node__toolbar-btn--drag:active {
902
+ cursor: grabbing;
903
+ }
904
+
905
+ .dc-node__toolbar-btn--drag.dc-node__toolbar-btn--disabled {
906
+ cursor: not-allowed;
907
+ }
908
+
909
+ .dc-node__toolbar--floating {
910
+ pointer-events: auto;
911
+ position: static;
912
+ top: auto;
913
+ right: auto;
914
+ }
915
+
916
+ .dc-node__selection-projection {
917
+ z-index: 10;
918
+ pointer-events: none;
919
+ position: absolute;
920
+ }
921
+
922
+ .dc-node__selection-outline {
923
+ pointer-events: none;
924
+ position: absolute;
925
+ inset: 0;
926
+ }
927
+
928
+ .dc-node__selection-projection--root-segment > .dc-node__selection-outline {
929
+ border: 0;
930
+ }
931
+
932
+ .dc-node__selection-edge {
933
+ display: block;
934
+ position: absolute;
935
+ }
936
+
937
+ .dc-node__selection-edge--block-start, .dc-node__selection-edge--block-end {
938
+ height: var(--dc-node-selection-root-block-overlap, var(--dc-node-selection-stroke-width, 2px));
939
+ left: 0;
940
+ right: 0;
941
+ }
942
+
943
+ .dc-node__selection-edge--block-start {
944
+ bottom: 100%;
945
+ }
946
+
947
+ .dc-node__selection-edge--block-end {
948
+ top: 100%;
949
+ }
950
+
951
+ .dc-node__selection-edge--inline-start, .dc-node__selection-edge--inline-end {
952
+ top: calc(-1 * var(--dc-node-selection-root-block-overlap, var(--dc-node-selection-stroke-width, 2px)));
953
+ bottom: calc(-1 * var(--dc-node-selection-root-block-overlap, var(--dc-node-selection-stroke-width, 2px)));
954
+ width: var(--dc-node-selection-root-inline-overlap, var(--dc-node-selection-stroke-width, 2px));
955
+ }
956
+
957
+ .dc-node__selection-edge--inline-start {
958
+ left: 0;
959
+ }
960
+
961
+ .dc-node__selection-edge--inline-end {
962
+ right: 0;
963
+ }
964
+
965
+ .dc-container-region--empty {
966
+ min-height: 32px;
967
+ }
968
+
969
+ .dc-drop-indicator {
970
+ pointer-events: none;
971
+ min-height: 48px;
972
+ margin: 4px 0;
973
+ }
974
+
975
+ .dc-widget-fallback {
976
+ text-align: center;
977
+ padding: 8px 12px;
978
+ }
979
+
980
+ .dc-forbidden-overlay {
981
+ z-index: 120;
982
+ pointer-events: none;
983
+ justify-content: center;
984
+ align-items: center;
985
+ min-height: 120px;
986
+ display: flex;
987
+ position: absolute;
988
+ inset: 0;
989
+ }
990
+
991
+ .dc-forbidden-overlay__text {
992
+ overflow-wrap: anywhere;
993
+ text-align: center;
994
+ white-space: normal;
995
+ max-width: min(280px, 100% - 32px);
996
+ padding: 6px 10px;
997
+ }
998
+
999
+ .dc-form-generator, .dc-form-section, .dc-form-section__header, .dc-form-section__body, .dc-form-field, .dc-form-field__control, .dc-field-unknown {
1000
+ box-sizing: border-box;
1001
+ }
1002
+
1003
+ .dc-field-unknown {
1004
+ border: 1px dashed #0000;
1005
+ }
1006
+
1007
+ .dc-form-generator {
1008
+ padding: 0 12px;
1009
+ }
1010
+
1011
+ .dc-form-section {
1012
+ margin-bottom: 4px;
1013
+ }
1014
+
1015
+ .dc-form-section__header {
1016
+ text-align: left;
1017
+ cursor: pointer;
1018
+ user-select: none;
1019
+ border: 0;
1020
+ justify-content: space-between;
1021
+ align-items: center;
1022
+ width: 100%;
1023
+ min-height: 34px;
1024
+ padding: 0 6px;
1025
+ display: flex;
1026
+ }
1027
+
1028
+ .dc-form-section__toggle {
1029
+ flex: none;
1030
+ display: inline-flex;
1031
+ }
1032
+
1033
+ .dc-form-section__toggle--collapsed {
1034
+ transform: rotate(-90deg);
1035
+ }
1036
+
1037
+ .dc-form-section__body {
1038
+ padding-bottom: 8px;
1039
+ }
1040
+
1041
+ .dc-form-section--grid {
1042
+ grid-template-columns: repeat(var(--_dc-columns), minmax(0, 1fr));
1043
+ gap: 10px 12px;
1044
+ display: grid;
1045
+ }
1046
+
1047
+ .dc-form-field {
1048
+ flex-direction: column;
1049
+ gap: 4px;
1050
+ margin-bottom: 10px;
1051
+ display: flex;
1052
+ }
1053
+
1054
+ .dc-form-section--grid > .dc-form-field {
1055
+ grid-column: span min(var(--_dc-span, 1), var(--_dc-columns));
1056
+ min-width: 0;
1057
+ margin-bottom: 0;
1058
+ }
1059
+
1060
+ .dc-form-field__control {
1061
+ width: 100%;
1062
+ min-width: 0;
1063
+ }
1064
+
1065
+ .dc-field-unknown {
1066
+ padding: 6px 8px;
1067
+ }
1068
+
1069
+ :root {
1070
+ --dc-color-accent: #6750a4;
1071
+ --dc-color-accent-hover: #5b4595;
1072
+ --dc-color-accent-active: #4f378b;
1073
+ --dc-color-accent-subtle: #eaddff;
1074
+ --dc-color-accent-border: #c4a7e7;
1075
+ --dc-color-accent-ring: #6750a43d;
1076
+ --dc-color-on-accent: #fff;
1077
+ --dc-color-on-accent-subtle: #21005d;
1078
+ --dc-color-success: #386a20;
1079
+ --dc-color-warning: #7d5700;
1080
+ --dc-color-danger: #ba1a1a;
1081
+ --dc-color-danger-subtle: #ffdad6;
1082
+ --dc-color-text: #1d1b20;
1083
+ --dc-color-text-muted: #49454f;
1084
+ --dc-color-text-subtle: #79747e;
1085
+ --dc-color-surface: #fffbfe;
1086
+ --dc-color-surface-subtle: #f7f2fa;
1087
+ --dc-color-surface-muted: #f3edf7;
1088
+ --dc-color-surface-raised: #fffbfe;
1089
+ --dc-color-canvas: #eee8f2;
1090
+ --dc-color-border: #79747e;
1091
+ --dc-color-border-subtle: #cac4d0;
1092
+ --dc-color-focus-ring: #6750a4;
1093
+ --dc-color-backdrop: #1d1b2052;
1094
+ --dc-color-sidebar-handle: #cac4d0;
1095
+ --dc-color-sidebar-handle-hover: #938f99;
1096
+ --dc-font-sans: Roboto, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1097
+ --dc-font-size-xs: 11px;
1098
+ --dc-font-size-sm: 12px;
1099
+ --dc-font-size-md: 14px;
1100
+ --dc-font-size-lg: 16px;
1101
+ --dc-font-weight-regular: 400;
1102
+ --dc-font-weight-medium: 500;
1103
+ --dc-font-weight-semibold: 600;
1104
+ --dc-radius-sm: 8px;
1105
+ --dc-radius-md: 12px;
1106
+ --dc-radius-lg: 16px;
1107
+ --dc-radius-full: 999px;
1108
+ --dc-control-height-sm: 32px;
1109
+ --dc-control-height-md: 40px;
1110
+ --dc-control-height-lg: 48px;
1111
+ --dc-shadow-sm: 0 1px 2px #1d1b2029, 0 1px 3px 1px #1d1b2014;
1112
+ --dc-shadow-md: 0 2px 6px 2px #1d1b201f, 0 1px 2px #1d1b202e;
1113
+ --dc-shadow-lg: 0 8px 24px 4px #1d1b2029;
1114
+ --dc-duration-fast: .1s;
1115
+ --dc-duration-normal: .2s;
1116
+ --dc-ease-standard: cubic-bezier(.2, 0, 0, 1);
1117
+ --dc-empty-state-icon-opacity: .4;
1118
+ --dc-empty-state-icon-size: 40px;
1119
+ --dc-material-item-shadow: var(--dc-shadow-sm);
1120
+ --dc-material-item-hover-shadow: var(--dc-shadow-md);
1121
+ --dc-material-search-radius: var(--dc-radius-full);
1122
+ --dc-node-selection-stroke-width: 2px;
1123
+ --dc-node-toolbar-shadow: 0 4px 12px var(--dc-color-accent-ring);
1124
+ }
1125
+
1126
+ [data-dc-component="left-sidebar"], [data-dc-component="right-sidebar"], [data-dc-component="canvas-controls"], [data-dc-component="material-panel"], [data-dc-component="material-group"], [data-dc-component="material-item"], [data-dc-component="structure-panel"], [data-dc-component="structure-item"], [data-dc-component="structure-region"], [data-dc-component="property-panel"], [data-dc-component="form-generator"], [data-dc-component="form-section"], [data-dc-component="form-field"], [data-dc-component="empty-state"], [data-dc-component="forbidden-overlay"], [data-dc-component="drop-indicator"], [data-dc-component="node-handle"], [data-dc-component="node-toolbar"], [data-dc-component="widget-fallback"] {
1127
+ color: var(--dc-color-text);
1128
+ font-family: var(--dc-font-sans);
1129
+ }
1130
+
1131
+ [data-dc-component="designer"] {
1132
+ background: var(--dc-color-surface-subtle);
1133
+ outline: none;
1134
+ }
1135
+
1136
+ [data-dc-component="designer"] > [data-dc-part="body"] > [data-dc-part="left-panel"], [data-dc-component="designer"] > [data-dc-part="body"] > [data-dc-part="right-panel"] {
1137
+ background: var(--dc-color-surface);
1138
+ border-color: var(--dc-color-border-subtle);
1139
+ }
1140
+
1141
+ [data-dc-component="designer"] > [data-dc-part="body"] > [data-dc-part="center-panel"] {
1142
+ background: var(--dc-color-canvas);
1143
+ }
1144
+
1145
+ [data-dc-component="left-sidebar"] > [data-dc-part="surface"] > [data-dc-part="rail"], [data-dc-component="right-sidebar"] > [data-dc-part="surface"] > [data-dc-part="rail"] {
1146
+ background: var(--dc-color-surface-subtle);
1147
+ border-color: var(--dc-color-border-subtle);
1148
+ }
1149
+
1150
+ [data-dc-component="left-sidebar"] [data-dc-part="rail-extension"], [data-dc-component="right-sidebar"] [data-dc-part="rail-extension"] {
1151
+ border-color: var(--dc-color-border-subtle);
1152
+ }
1153
+
1154
+ [data-dc-component="left-sidebar"] [data-dc-part="tab"], [data-dc-component="right-sidebar"] [data-dc-part="tab"] {
1155
+ color: var(--dc-color-text-muted);
1156
+ border-radius: var(--dc-radius-md);
1157
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), border-color var(--dc-duration-fast);
1158
+ background: none;
1159
+ }
1160
+
1161
+ [data-dc-component="left-sidebar"] [data-dc-part="tab"]:hover, [data-dc-component="right-sidebar"] [data-dc-part="tab"]:hover:not(:disabled) {
1162
+ color: var(--dc-color-text);
1163
+ background: var(--dc-color-surface);
1164
+ }
1165
+
1166
+ [data-dc-component="left-sidebar"] [data-dc-part="tab"]:focus-visible, [data-dc-component="right-sidebar"] [data-dc-part="tab"]:focus-visible, [data-dc-component="left-sidebar"] > [data-dc-part="toggle"]:focus-visible, [data-dc-component="right-sidebar"] > [data-dc-part="toggle"]:focus-visible {
1167
+ outline: 2px solid var(--dc-color-focus-ring);
1168
+ outline-offset: 1px;
1169
+ }
1170
+
1171
+ [data-dc-component="left-sidebar"] [data-dc-part="tab"][aria-pressed="true"], [data-dc-component="right-sidebar"] [data-dc-part="tab"][aria-selected="true"] {
1172
+ color: var(--dc-color-on-accent-subtle);
1173
+ background: var(--dc-color-accent-subtle);
1174
+ border-color: var(--dc-color-accent-border);
1175
+ }
1176
+
1177
+ [data-dc-component="right-sidebar"] [data-dc-part="tab"]:disabled {
1178
+ color: var(--dc-color-text-subtle);
1179
+ opacity: .45;
1180
+ }
1181
+
1182
+ [data-dc-component="left-sidebar"] > [data-dc-part="toggle"], [data-dc-component="right-sidebar"] > [data-dc-part="toggle"] {
1183
+ color: var(--dc-color-text-subtle);
1184
+ background: var(--dc-color-sidebar-handle);
1185
+ opacity: .82;
1186
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), opacity var(--dc-duration-fast);
1187
+ }
1188
+
1189
+ [data-dc-component="left-sidebar"] > [data-dc-part="toggle"] {
1190
+ clip-path: polygon(0 10%, 100% 24%, 100% 76%, 0 90%);
1191
+ }
1192
+
1193
+ [data-dc-component="right-sidebar"] > [data-dc-part="toggle"] {
1194
+ clip-path: polygon(100% 10%, 0 24%, 0 76%, 100% 90%);
1195
+ }
1196
+
1197
+ [data-dc-component="left-sidebar"] > [data-dc-part="toggle"]:hover, [data-dc-component="right-sidebar"] > [data-dc-part="toggle"]:hover {
1198
+ color: var(--dc-color-text-muted);
1199
+ background: var(--dc-color-sidebar-handle-hover);
1200
+ opacity: 1;
1201
+ }
1202
+
1203
+ [data-dc-component="designer"][data-dc-state~="compact"] > [data-dc-part="body"] > [data-dc-part="left-panel"], [data-dc-component="designer"][data-dc-state~="compact"] > [data-dc-part="body"] > [data-dc-part="right-panel"] {
1204
+ box-shadow: var(--dc-shadow-lg);
1205
+ transition: transform var(--dc-duration-normal) var(--dc-ease-standard);
1206
+ }
1207
+
1208
+ [data-dc-component="designer"] > [data-dc-part="body"] > [data-dc-part="backdrop"] {
1209
+ background: var(--dc-color-backdrop);
1210
+ }
1211
+
1212
+ [data-dc-component="material-panel"] > [data-dc-part="header"] > [data-dc-part="heading"] {
1213
+ color: var(--dc-color-text);
1214
+ font-size: var(--dc-font-size-md);
1215
+ font-weight: var(--dc-font-weight-semibold);
1216
+ }
1217
+
1218
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-icon"] {
1219
+ color: var(--dc-color-text-subtle);
1220
+ }
1221
+
1222
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-input"] {
1223
+ color: var(--dc-color-text);
1224
+ font-family: var(--dc-font-sans);
1225
+ font-size: var(--dc-font-size-sm);
1226
+ background: var(--dc-color-surface-subtle);
1227
+ border-color: var(--dc-color-border-subtle);
1228
+ border-radius: var(--dc-material-search-radius);
1229
+ transition: background-color var(--dc-duration-fast), border-color var(--dc-duration-fast), box-shadow var(--dc-duration-fast);
1230
+ outline: none;
1231
+ }
1232
+
1233
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-input"]:focus {
1234
+ background: var(--dc-color-surface-raised);
1235
+ border-color: var(--dc-color-accent);
1236
+ box-shadow: 0 0 0 2px var(--dc-color-accent-ring);
1237
+ }
1238
+
1239
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-input"]::placeholder {
1240
+ color: var(--dc-color-text-subtle);
1241
+ }
1242
+
1243
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-clear"] {
1244
+ color: var(--dc-color-text-muted);
1245
+ border-radius: var(--dc-radius-md);
1246
+ background: none;
1247
+ }
1248
+
1249
+ [data-dc-component="material-panel"] > [data-dc-part="search"] > [data-dc-part="search-clear"]:hover {
1250
+ background: var(--dc-color-surface-muted);
1251
+ }
1252
+
1253
+ [data-dc-component="material-group"] > [data-dc-part="header"], [data-dc-component="form-section"] > [data-dc-part="header"] {
1254
+ color: var(--dc-color-text-muted);
1255
+ border-radius: var(--dc-radius-md);
1256
+ background: none;
1257
+ }
1258
+
1259
+ [data-dc-component="material-group"] > [data-dc-part="header"]:hover, [data-dc-component="form-section"] > [data-dc-part="header"]:hover {
1260
+ color: var(--dc-color-text);
1261
+ background: var(--dc-color-surface-subtle);
1262
+ }
1263
+
1264
+ [data-dc-component="material-group"] > [data-dc-part="header"]:focus-visible, [data-dc-component="form-section"] > [data-dc-part="header"]:focus-visible {
1265
+ outline: 2px solid var(--dc-color-focus-ring);
1266
+ outline-offset: -1px;
1267
+ }
1268
+
1269
+ [data-dc-component="material-group"] > [data-dc-part="header"] > [data-dc-part="title"], [data-dc-component="form-section"] > [data-dc-part="header"] > [data-dc-part="title"] {
1270
+ color: var(--dc-color-text-muted);
1271
+ font-size: var(--dc-font-size-sm);
1272
+ font-weight: var(--dc-font-weight-semibold);
1273
+ }
1274
+
1275
+ [data-dc-component="material-group"] > [data-dc-part="header"] > [data-dc-part="toggle"], [data-dc-component="form-section"] > [data-dc-part="header"] > [data-dc-part="toggle"] {
1276
+ transition: transform var(--dc-duration-normal) var(--dc-ease-standard);
1277
+ }
1278
+
1279
+ [data-dc-component="material-item"] {
1280
+ color: var(--dc-color-text-muted);
1281
+ background: var(--dc-color-surface-raised);
1282
+ border-color: var(--dc-color-border-subtle);
1283
+ border-radius: var(--dc-radius-md);
1284
+ box-shadow: var(--dc-material-item-shadow);
1285
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), border-color var(--dc-duration-fast), box-shadow var(--dc-duration-fast);
1286
+ }
1287
+
1288
+ [data-dc-component="material-item"]:hover {
1289
+ color: var(--dc-color-on-accent-subtle);
1290
+ background: var(--dc-color-accent-subtle);
1291
+ border-color: var(--dc-color-accent-border);
1292
+ box-shadow: var(--dc-material-item-hover-shadow);
1293
+ }
1294
+
1295
+ [data-dc-component="material-item"][data-dc-state~="dragging"] {
1296
+ opacity: .5;
1297
+ }
1298
+
1299
+ [data-dc-component="material-item"] > [data-dc-part="icon"] {
1300
+ color: var(--dc-color-on-accent-subtle);
1301
+ background: var(--dc-color-accent-subtle);
1302
+ border-radius: var(--dc-radius-md);
1303
+ }
1304
+
1305
+ [data-dc-component="material-item"] > [data-dc-part="thumbnail"] {
1306
+ background: var(--dc-color-surface-subtle);
1307
+ border-radius: var(--dc-radius-md);
1308
+ }
1309
+
1310
+ [data-dc-component="material-item"] [data-dc-part="title"] {
1311
+ color: inherit;
1312
+ font-size: var(--dc-font-size-xs);
1313
+ line-height: 1.3;
1314
+ }
1315
+
1316
+ [data-dc-component="structure-panel"] > [data-dc-part="header"] > [data-dc-part="heading"] {
1317
+ color: var(--dc-color-text);
1318
+ font-size: var(--dc-font-size-md);
1319
+ font-weight: var(--dc-font-weight-semibold);
1320
+ }
1321
+
1322
+ [data-dc-component="structure-item"] {
1323
+ color: var(--dc-color-text);
1324
+ border-radius: var(--dc-radius-md);
1325
+ transition: background-color var(--dc-duration-fast), border-color var(--dc-duration-fast);
1326
+ background: none;
1327
+ }
1328
+
1329
+ [data-dc-component="structure-item"]:hover {
1330
+ background: var(--dc-color-surface-subtle);
1331
+ }
1332
+
1333
+ [data-dc-component="structure-item"][data-dc-state~="selected"] {
1334
+ background: var(--dc-color-accent-subtle);
1335
+ border-color: var(--dc-color-accent-border);
1336
+ }
1337
+
1338
+ [data-dc-component="structure-item"] > [data-dc-part="select"] {
1339
+ color: inherit;
1340
+ border-radius: var(--dc-radius-md);
1341
+ background: none;
1342
+ }
1343
+
1344
+ [data-dc-component="structure-item"] > [data-dc-part="select"]:focus-visible {
1345
+ outline: 2px solid var(--dc-color-focus-ring);
1346
+ outline-offset: -1px;
1347
+ }
1348
+
1349
+ [data-dc-component="structure-item"] [data-dc-part="branch"], [data-dc-component="structure-region"] [data-dc-part="branch"] {
1350
+ border-bottom: 1px solid var(--dc-color-border);
1351
+ border-left: 1px solid var(--dc-color-border);
1352
+ border-bottom-left-radius: 3px;
1353
+ }
1354
+
1355
+ [data-dc-component="structure-item"] [data-dc-part="title"] {
1356
+ color: var(--dc-color-text);
1357
+ font-size: var(--dc-font-size-sm);
1358
+ font-weight: var(--dc-font-weight-medium);
1359
+ }
1360
+
1361
+ [data-dc-component="structure-item"] [data-dc-part="id"] {
1362
+ color: var(--dc-color-text-subtle);
1363
+ font-size: var(--dc-font-size-xs);
1364
+ }
1365
+
1366
+ [data-dc-component="structure-item"] > [data-dc-part="actions"] > [data-dc-part="action"] {
1367
+ color: var(--dc-color-text-muted);
1368
+ border-radius: var(--dc-radius-md);
1369
+ opacity: 0;
1370
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), opacity var(--dc-duration-fast);
1371
+ background: none;
1372
+ }
1373
+
1374
+ [data-dc-component="structure-item"]:hover > [data-dc-part="actions"] > [data-dc-part="action"], [data-dc-component="structure-item"]:focus-within > [data-dc-part="actions"] > [data-dc-part="action"], [data-dc-component="structure-item"][data-dc-state~="selected"] > [data-dc-part="actions"] > [data-dc-part="action"] {
1375
+ opacity: 1;
1376
+ }
1377
+
1378
+ [data-dc-component="structure-item"] > [data-dc-part="actions"] > [data-dc-part="action"]:hover:not(:disabled) {
1379
+ color: var(--dc-color-text);
1380
+ background: var(--dc-color-surface-subtle);
1381
+ }
1382
+
1383
+ [data-dc-component="structure-item"] > [data-dc-part="actions"] > [data-dc-part="action"][data-dc-state~="danger"]:hover:not(:disabled) {
1384
+ color: var(--dc-color-danger);
1385
+ background: var(--dc-color-danger-subtle);
1386
+ }
1387
+
1388
+ [data-dc-component="structure-item"] > [data-dc-part="actions"] > [data-dc-part="action"]:focus-visible {
1389
+ outline: 2px solid var(--dc-color-focus-ring);
1390
+ outline-offset: 1px;
1391
+ opacity: 1;
1392
+ }
1393
+
1394
+ [data-dc-component="structure-item"] > [data-dc-part="actions"] > [data-dc-part="action"]:disabled {
1395
+ opacity: .35;
1396
+ }
1397
+
1398
+ [data-dc-component="structure-region"] > [data-dc-part="row"] {
1399
+ color: var(--dc-color-text-subtle);
1400
+ font-size: var(--dc-font-size-xs);
1401
+ }
1402
+
1403
+ [data-dc-component="structure-panel"] > [data-dc-part="empty"], [data-dc-component="property-panel"] > [data-dc-part="content"] > [data-dc-part="empty"] {
1404
+ color: var(--dc-color-text-subtle);
1405
+ font-size: var(--dc-font-size-sm);
1406
+ }
1407
+
1408
+ [data-dc-component="canvas"] {
1409
+ background: var(--dc-color-canvas);
1410
+ }
1411
+
1412
+ [data-dc-component="canvas-controls"] > [data-dc-part="toolbar"] {
1413
+ background: color-mix(in srgb, var(--dc-color-surface-raised), transparent 4%);
1414
+ border-color: var(--dc-color-border-subtle);
1415
+ border-radius: var(--dc-radius-md);
1416
+ box-shadow: var(--dc-shadow-sm);
1417
+ backdrop-filter: blur(8px);
1418
+ }
1419
+
1420
+ [data-dc-component="canvas-controls"] [data-dc-part="button"] {
1421
+ color: var(--dc-color-text-muted);
1422
+ border-radius: calc(var(--dc-radius-md) - 1px);
1423
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), border-color var(--dc-duration-fast);
1424
+ background: none;
1425
+ }
1426
+
1427
+ [data-dc-component="canvas-controls"] [data-dc-part="button"][aria-pressed="true"] {
1428
+ color: var(--dc-color-on-accent-subtle);
1429
+ background: var(--dc-color-accent-subtle);
1430
+ border-color: var(--dc-color-accent-border);
1431
+ }
1432
+
1433
+ [data-dc-component="canvas-controls"] [data-dc-part="divider"] {
1434
+ background: var(--dc-color-border-subtle);
1435
+ }
1436
+
1437
+ [data-dc-component="canvas-controls"] [data-dc-part="button"]:hover:not(:disabled) {
1438
+ color: var(--dc-color-text);
1439
+ background: var(--dc-color-surface-muted);
1440
+ }
1441
+
1442
+ [data-dc-component="canvas-controls"] [data-dc-part="button"]:disabled {
1443
+ color: var(--dc-color-text-subtle);
1444
+ opacity: .55;
1445
+ }
1446
+
1447
+ [data-dc-component="canvas-controls"] [data-dc-part="button"]:focus-visible {
1448
+ outline: 2px solid var(--dc-color-focus-ring);
1449
+ outline-offset: 1px;
1450
+ }
1451
+
1452
+ [data-dc-component="root-renderer"] {
1453
+ background: var(--dc-color-surface);
1454
+ }
1455
+
1456
+ [data-dc-component="empty-state"] {
1457
+ color: var(--dc-color-text-subtle);
1458
+ font-size: var(--dc-font-size-sm);
1459
+ }
1460
+
1461
+ [data-dc-component="empty-state"] > [data-dc-part="icon"] {
1462
+ font-size: var(--dc-empty-state-icon-size);
1463
+ opacity: var(--dc-empty-state-icon-opacity);
1464
+ }
1465
+
1466
+ [data-dc-component="node"][data-dc-state~="hidden"] {
1467
+ opacity: .4;
1468
+ outline: 1px dashed var(--dc-color-border);
1469
+ outline-offset: -1px;
1470
+ }
1471
+
1472
+ [data-dc-component="node"][data-dc-state~="dragging"] {
1473
+ opacity: .38;
1474
+ }
1475
+
1476
+ [data-dc-component="node"][data-dc-state~="drag-over"] {
1477
+ background-color: var(--dc-color-accent-subtle);
1478
+ outline: 1px dashed var(--dc-color-accent);
1479
+ outline-offset: -1px;
1480
+ }
1481
+
1482
+ [data-dc-component="node-handle"] {
1483
+ color: var(--dc-color-accent);
1484
+ font: inherit;
1485
+ background: none;
1486
+ }
1487
+
1488
+ [data-dc-component="node-handle"] > [data-dc-part="surface"] {
1489
+ color: var(--dc-color-on-accent);
1490
+ background: var(--dc-color-accent);
1491
+ border-radius: var(--dc-radius-sm);
1492
+ box-shadow: var(--dc-shadow-sm);
1493
+ transition: background-color var(--dc-duration-fast) var(--dc-ease-standard), transform var(--dc-duration-fast) var(--dc-ease-standard);
1494
+ }
1495
+
1496
+ [data-dc-component="node-handle"] > [data-dc-part="icon"] {
1497
+ line-height: 0;
1498
+ }
1499
+
1500
+ [data-dc-component="node"] > [data-dc-component="node-handle"] {
1501
+ opacity: 0;
1502
+ transition: opacity var(--dc-duration-fast) var(--dc-ease-standard);
1503
+ }
1504
+
1505
+ [data-dc-component="node"][data-dc-state~="hovered"] > [data-dc-component="node-handle"], [data-dc-component="node"] > [data-dc-component="node-handle"]:focus-visible {
1506
+ opacity: 1;
1507
+ }
1508
+
1509
+ [data-dc-component="node"][data-dc-state~="selected"] > [data-dc-component="node-handle"] {
1510
+ opacity: 0;
1511
+ }
1512
+
1513
+ [data-dc-component="node-handle"]:hover > [data-dc-part="surface"] {
1514
+ background: var(--dc-color-accent-hover);
1515
+ }
1516
+
1517
+ [data-dc-component="node-handle"]:active > [data-dc-part="surface"] {
1518
+ background: var(--dc-color-accent-active);
1519
+ }
1520
+
1521
+ [data-dc-component="node-handle"]:focus-visible {
1522
+ outline: none;
1523
+ }
1524
+
1525
+ [data-dc-component="node-handle"]:focus-visible > [data-dc-part="surface"] {
1526
+ outline: 2px solid var(--dc-color-focus-ring);
1527
+ outline-offset: 2px;
1528
+ }
1529
+
1530
+ [data-dc-component="node-handle-anchor"] {
1531
+ opacity: 0;
1532
+ transition: opacity var(--dc-duration-fast) var(--dc-ease-standard);
1533
+ }
1534
+
1535
+ [data-dc-component="node-handle-anchor"][data-dc-state~="visible"] {
1536
+ opacity: .15;
1537
+ }
1538
+
1539
+ [data-dc-component="node-handle-anchor"][data-dc-state~="visible"]:hover, [data-dc-component="node-handle-anchor"][data-dc-state~="visible"]:focus-within {
1540
+ opacity: 1;
1541
+ }
1542
+
1543
+ [data-dc-component="node-toolbar"] {
1544
+ color: var(--dc-color-on-accent);
1545
+ background: var(--dc-color-accent);
1546
+ border-radius: var(--dc-radius-md);
1547
+ box-shadow: var(--dc-node-toolbar-shadow);
1548
+ }
1549
+
1550
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"] {
1551
+ color: var(--dc-color-on-accent);
1552
+ background: var(--dc-color-accent);
1553
+ border-radius: calc(var(--dc-radius-md) - 1px);
1554
+ opacity: .92;
1555
+ transition: color var(--dc-duration-fast), background-color var(--dc-duration-fast), opacity var(--dc-duration-fast), transform var(--dc-duration-fast);
1556
+ font-size: 14px;
1557
+ line-height: 1;
1558
+ }
1559
+
1560
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"]:hover:not(:disabled, [aria-disabled="true"]) {
1561
+ color: var(--dc-color-on-accent);
1562
+ background: var(--dc-color-accent-hover);
1563
+ opacity: 1;
1564
+ }
1565
+
1566
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"]:focus-visible {
1567
+ outline: 2px solid var(--dc-color-on-accent);
1568
+ outline-offset: -2px;
1569
+ }
1570
+
1571
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"][data-dc-state~="danger"]:hover:not(:disabled) {
1572
+ color: var(--dc-color-on-accent);
1573
+ background: var(--dc-color-danger);
1574
+ }
1575
+
1576
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"]:disabled, [data-dc-component="node-toolbar"] > [data-dc-part="action"][data-dc-state~="disabled"] {
1577
+ color: var(--dc-color-on-accent);
1578
+ background: var(--dc-color-accent);
1579
+ opacity: .42;
1580
+ }
1581
+
1582
+ [data-dc-component="node-selection"] {
1583
+ border: var(--dc-node-selection-stroke-width) solid var(--dc-color-accent);
1584
+ }
1585
+
1586
+ [data-dc-component="node-selection"] > [data-dc-part="block-start-edge"], [data-dc-component="node-selection"] > [data-dc-part="inline-end-edge"], [data-dc-component="node-selection"] > [data-dc-part="block-end-edge"], [data-dc-component="node-selection"] > [data-dc-part="inline-start-edge"] {
1587
+ background: var(--dc-color-accent);
1588
+ }
1589
+
1590
+ [data-dc-component="container-region"][data-dc-state~="active"] {
1591
+ outline: 1px dashed var(--dc-color-accent);
1592
+ outline-offset: -1px;
1593
+ }
1594
+
1595
+ [data-dc-component="container-region"][data-dc-state~="forbidden"] {
1596
+ outline-color: var(--dc-color-danger);
1597
+ }
1598
+
1599
+ [data-dc-component="drop-indicator"] {
1600
+ background: var(--dc-color-accent-subtle);
1601
+ border: 2px dashed var(--dc-color-accent);
1602
+ border-radius: var(--dc-radius-lg);
1603
+ animation: dc-theme-fade-in var(--dc-duration-fast) ease;
1604
+ }
1605
+
1606
+ [data-dc-component="widget-fallback"] {
1607
+ color: var(--dc-color-danger);
1608
+ font-size: var(--dc-font-size-sm);
1609
+ border: 1px dashed var(--dc-color-danger);
1610
+ border-radius: var(--dc-radius-md);
1611
+ }
1612
+
1613
+ [data-dc-component="forbidden-overlay"] {
1614
+ color: var(--dc-color-danger);
1615
+ font-size: var(--dc-font-size-sm);
1616
+ font-weight: var(--dc-font-weight-medium);
1617
+ background: var(--dc-color-danger-subtle);
1618
+ border: 2px dashed var(--dc-color-danger);
1619
+ border-radius: var(--dc-radius-lg);
1620
+ line-height: 1.5;
1621
+ animation: 1.5s ease-in-out infinite dc-theme-forbidden-pulse;
1622
+ }
1623
+
1624
+ [data-dc-component="forbidden-overlay"] > [data-dc-part="text"] {
1625
+ background: var(--dc-color-surface);
1626
+ border: 1px solid color-mix(in srgb, var(--dc-color-danger), transparent 70%);
1627
+ border-radius: var(--dc-radius-md);
1628
+ }
1629
+
1630
+ [data-dc-component="form-field"] > [data-dc-part="label"] {
1631
+ color: var(--dc-color-text-muted);
1632
+ font-size: var(--dc-font-size-sm);
1633
+ font-weight: var(--dc-font-weight-medium);
1634
+ line-height: 1.4;
1635
+ }
1636
+
1637
+ [data-dc-component="form-field"] > [data-dc-part="tooltip"] {
1638
+ color: var(--dc-color-text-subtle);
1639
+ font-size: var(--dc-font-size-xs);
1640
+ line-height: 1.4;
1641
+ }
1642
+
1643
+ [data-dc-component="form-field"] > [data-dc-part="error"] {
1644
+ color: var(--dc-color-danger);
1645
+ font-size: var(--dc-font-size-xs);
1646
+ line-height: 1.4;
1647
+ }
1648
+
1649
+ [data-dc-component="form-field"][data-dc-state~="disabled"] {
1650
+ opacity: .5;
1651
+ }
1652
+
1653
+ [data-dc-component="form-field"][data-dc-state~="error"] > [data-dc-part="control"] {
1654
+ outline: 1px solid var(--dc-color-danger);
1655
+ outline-offset: 2px;
1656
+ border-radius: var(--dc-radius-md);
1657
+ }
1658
+
1659
+ [data-dc-component="form-field"] > [data-dc-part="unknown"] {
1660
+ color: var(--dc-color-warning);
1661
+ font-size: var(--dc-font-size-sm);
1662
+ border-color: var(--dc-color-warning);
1663
+ border-radius: var(--dc-radius-md);
1664
+ }
1665
+
1666
+ @media (prefers-reduced-motion: reduce) {
1667
+ [data-dc-component="node-handle"], [data-dc-component="node-handle"] > [data-dc-part="surface"], [data-dc-component="node-handle-anchor"], [data-dc-component="drop-indicator"], [data-dc-component="forbidden-overlay"] {
1668
+ transition: none;
1669
+ animation: none;
1670
+ }
1671
+
1672
+ [data-dc-component="node-toolbar"] > [data-dc-part="action"] {
1673
+ transition: none;
1674
+ }
1675
+ }
1676
+
1677
+ @keyframes dc-theme-fade-in {
1678
+ from {
1679
+ opacity: 0;
1680
+ }
1681
+
1682
+ to {
1683
+ opacity: 1;
1684
+ }
1685
+ }
1686
+
1687
+ @keyframes dc-theme-forbidden-pulse {
1688
+ 0%, 100% {
1689
+ opacity: .8;
1690
+ }
1691
+
1692
+ 50% {
1693
+ opacity: 1;
1694
+ }
1695
+ }
1696
+
1697
+ [data-dc-component="empty-state"] {
1698
+ font-weight: var(--dc-font-weight-medium);
1699
+ letter-spacing: .25px;
1700
+ }