@arcanewizards/timecode-toolbox 0.0.3 → 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.
@@ -0,0 +1,2678 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
3
+ @layer properties;
4
+ @layer properties;
5
+ .pointer-events-none {
6
+ pointer-events: none;
7
+ }
8
+ .absolute {
9
+ position: absolute;
10
+ }
11
+ .relative {
12
+ position: relative;
13
+ }
14
+ .-inset-1\.5 {
15
+ inset: calc(calc(var(--arcane-spacing) / 2 * 3) * -1);
16
+ }
17
+ .-inset-arcane-touch-indicator {
18
+ inset: calc(6px * -1);
19
+ }
20
+ .inset-x-2 {
21
+ inset-inline: calc(var(--arcane-spacing));
22
+ }
23
+ .inset-y-0 {
24
+ inset-block: 0px;
25
+ }
26
+ .-top-px {
27
+ top: -1px;
28
+ }
29
+ .top-0 {
30
+ top: 0px;
31
+ }
32
+ .bottom-1 {
33
+ bottom: calc(var(--arcane-spacing) / 2);
34
+ }
35
+ .-left-arcane-switch-label {
36
+ left: calc(40px * -1);
37
+ }
38
+ .-left-px {
39
+ left: -1px;
40
+ }
41
+ .left-0 {
42
+ left: 0px;
43
+ }
44
+ .left-arcane-switch-label {
45
+ left: 40px;
46
+ }
47
+ .left-arcane-switch-off-left {
48
+ left: 28px;
49
+ }
50
+ .z-arcane-slider-touching {
51
+ z-index: 100;
52
+ }
53
+ .m-0 {
54
+ margin: 0px;
55
+ }
56
+ .-mx-arcane-slider-input-hidden {
57
+ margin-inline: calc(9px * -1);
58
+ }
59
+ .-mx-arcane-slider-value-hidden {
60
+ margin-inline: calc(30px * -1);
61
+ }
62
+ .mx-0 {
63
+ margin-inline: 0px;
64
+ }
65
+ .mx-0\.5 {
66
+ margin-inline: calc(var(--arcane-spacing) / 4);
67
+ }
68
+ .mx-arcane-slider-pad {
69
+ margin-inline: 7.5px;
70
+ }
71
+ .my-0 {
72
+ margin-block: 0px;
73
+ }
74
+ .mr-px {
75
+ margin-right: 1px;
76
+ }
77
+ .mb-2 {
78
+ margin-bottom: calc(var(--arcane-spacing));
79
+ }
80
+ .box-border {
81
+ box-sizing: border-box;
82
+ }
83
+ .block {
84
+ display: block;
85
+ }
86
+ .flex {
87
+ display: flex;
88
+ }
89
+ .inline-block {
90
+ display: inline-block;
91
+ }
92
+ .size-arcane-btn {
93
+ width: 30px;
94
+ height: 30px;
95
+ }
96
+ .size-full {
97
+ width: 100%;
98
+ height: 100%;
99
+ }
100
+ .h-0\.5 {
101
+ height: calc(var(--arcane-spacing) / 4);
102
+ }
103
+ .h-arcane-btn {
104
+ height: 30px;
105
+ }
106
+ .h-arcane-rect {
107
+ height: 30px;
108
+ }
109
+ .h-arcane-slider-display {
110
+ height: 4px;
111
+ }
112
+ .h-arcane-slider-gradient-display {
113
+ height: 10px;
114
+ }
115
+ .h-arcane-switch-knob {
116
+ height: 30px;
117
+ }
118
+ .h-arcane-tabs-item {
119
+ height: calc(var(--arcane-spacing) * 3);
120
+ }
121
+ .h-arcane-timeline-bar {
122
+ height: 10px;
123
+ }
124
+ .h-full {
125
+ height: 100%;
126
+ }
127
+ .min-h-arcane-btn {
128
+ min-height: 30px;
129
+ }
130
+ .\!w-arcane-slider-open {
131
+ width: 400px !important;
132
+ }
133
+ .w-0 {
134
+ width: 0px;
135
+ }
136
+ .w-3\/5 {
137
+ width: calc(3/5 * 100%);
138
+ }
139
+ .w-arcane-slider-value {
140
+ width: 60px;
141
+ }
142
+ .w-arcane-switch-label {
143
+ width: 40px;
144
+ }
145
+ .w-arcane-switch-track {
146
+ width: 70px;
147
+ }
148
+ .w-full {
149
+ width: 100%;
150
+ }
151
+ .min-w-arcane-rect {
152
+ min-width: 30px;
153
+ }
154
+ .min-w-arcane-slider-min {
155
+ min-width: 100px;
156
+ }
157
+ .min-w-arcane-switch-track {
158
+ min-width: 70px;
159
+ }
160
+ .grow {
161
+ flex-grow: 1;
162
+ }
163
+ .cursor-pointer {
164
+ cursor: pointer;
165
+ }
166
+ .flex-col {
167
+ flex-direction: column;
168
+ }
169
+ .flex-row {
170
+ flex-direction: row;
171
+ }
172
+ .flex-nowrap {
173
+ flex-wrap: nowrap;
174
+ }
175
+ .flex-wrap {
176
+ flex-wrap: wrap;
177
+ }
178
+ .items-center {
179
+ align-items: center;
180
+ }
181
+ .items-end {
182
+ align-items: flex-end;
183
+ }
184
+ .justify-center {
185
+ justify-content: center;
186
+ }
187
+ .gap-0\.5 {
188
+ gap: calc(var(--arcane-spacing) / 4);
189
+ }
190
+ .gap-2 {
191
+ gap: calc(var(--arcane-spacing));
192
+ }
193
+ .overflow-hidden {
194
+ overflow: hidden;
195
+ }
196
+ .overflow-visible {
197
+ overflow: visible;
198
+ }
199
+ .rounded-arcane-btn {
200
+ border-radius: 3px;
201
+ }
202
+ .rounded-arcane-touch-indicator {
203
+ border-radius: 6px;
204
+ }
205
+ .rounded-md {
206
+ border-radius: calc(var(--arcane-spacing) * 6 / 15);
207
+ }
208
+ .border {
209
+ border-style: var(--tw-border-style);
210
+ border-width: 1px;
211
+ }
212
+ .border-2 {
213
+ border-style: var(--tw-border-style);
214
+ border-width: 2px;
215
+ }
216
+ .border-r-\[2px\] {
217
+ border-right-style: var(--tw-border-style);
218
+ border-right-width: 2px;
219
+ }
220
+ .border-b {
221
+ border-bottom-style: var(--tw-border-style);
222
+ border-bottom-width: 1px;
223
+ }
224
+ .border-b-0 {
225
+ border-bottom-style: var(--tw-border-style);
226
+ border-bottom-width: 0px;
227
+ }
228
+ .border-none {
229
+ --tw-border-style: none;
230
+ border-style: none;
231
+ }
232
+ .border-arcane-bg-light-1 {
233
+ border-color: var(--arcane-bg-light-1);
234
+ }
235
+ .border-arcane-btn-border {
236
+ border-color: var(--arcane-border-dark);
237
+ }
238
+ .border-arcane-btn-err {
239
+ border-color: var(--arcane-color-red);
240
+ }
241
+ .border-arcane-hint {
242
+ border-color: var(--arcane-hint);
243
+ }
244
+ .border-transparent {
245
+ border-color: transparent;
246
+ }
247
+ .\!bg-arcane-bg-dark-1 {
248
+ background-color: var(--arcane-bg-dark-1) !important;
249
+ }
250
+ .bg-arcane-bg {
251
+ background-color: var(--arcane-bg);
252
+ }
253
+ .bg-arcane-bg-dark-1 {
254
+ background-color: var(--arcane-bg-dark-1);
255
+ }
256
+ .bg-arcane-bg-light-1 {
257
+ background-color: var(--arcane-bg-light-1);
258
+ }
259
+ .bg-arcane-btn-border {
260
+ background-color: var(--arcane-border-dark);
261
+ }
262
+ .bg-arcane-hint {
263
+ background-color: var(--arcane-hint);
264
+ }
265
+ .bg-arcane-hint-soft {
266
+ background-color: rgba(var(--val-arcane-hint-rgb), 0.2);
267
+ }
268
+ .bg-transparent {
269
+ background-color: transparent;
270
+ }
271
+ .\!bg-arcane-grad-btn-active {
272
+ background-image: var(--arcane-gradient-button-active) !important;
273
+ }
274
+ .bg-arcane-grad-btn {
275
+ background-image: var(--arcane-gradient-button);
276
+ }
277
+ .bg-arcane-grad-btn-active {
278
+ background-image: var(--arcane-gradient-button-active);
279
+ }
280
+ .bg-arcane-grad-hint-pressed {
281
+ background-image: var( --arcane-gradient-hint-pressed );
282
+ }
283
+ .bg-repeat {
284
+ background-repeat: repeat;
285
+ }
286
+ .p-1 {
287
+ padding: calc(var(--arcane-spacing) / 2);
288
+ }
289
+ .p-2 {
290
+ padding: calc(var(--arcane-spacing));
291
+ }
292
+ .px-0\.5 {
293
+ padding-inline: calc(var(--arcane-spacing) / 4);
294
+ }
295
+ .px-1 {
296
+ padding-inline: calc(var(--arcane-spacing) / 2);
297
+ }
298
+ .px-arcane {
299
+ padding-inline: var(--arcane-spacing);
300
+ }
301
+ .px-arcane-slider-input-px {
302
+ padding-inline: 5px;
303
+ }
304
+ .px-arcane-slider-pad {
305
+ padding-inline: 7.5px;
306
+ }
307
+ .py-0 {
308
+ padding-block: 0px;
309
+ }
310
+ .py-0\.5 {
311
+ padding-block: calc(var(--arcane-spacing) / 4);
312
+ }
313
+ .text-center {
314
+ text-align: center;
315
+ }
316
+ .font-arcane-icon {
317
+ font-family: 'Material Symbols Outlined', sans-serif;
318
+ }
319
+ .text-arcane-icon {
320
+ font-size: 22px;
321
+ }
322
+ .text-arcane-normal {
323
+ font-size: 1em;
324
+ }
325
+ .text-arcane-subtitle {
326
+ font-size: 1em;
327
+ }
328
+ .text-arcane-timeline-indicator {
329
+ font-size: 40px;
330
+ }
331
+ .text-arcane-title {
332
+ font-size: 1.5em;
333
+ }
334
+ .leading-arcane-slider-value-hidden {
335
+ --tw-leading: 30px;
336
+ line-height: 30px;
337
+ }
338
+ .leading-arcane-switch-label {
339
+ --tw-leading: 28px;
340
+ line-height: 28px;
341
+ }
342
+ .leading-none {
343
+ --tw-leading: 1;
344
+ line-height: 1;
345
+ }
346
+ .font-bold {
347
+ --tw-font-weight: 700;
348
+ font-weight: 700;
349
+ }
350
+ .font-normal {
351
+ --tw-font-weight: 400;
352
+ font-weight: 400;
353
+ }
354
+ .tracking-normal {
355
+ --tw-tracking: 0em;
356
+ letter-spacing: 0em;
357
+ }
358
+ .whitespace-nowrap {
359
+ white-space: nowrap;
360
+ }
361
+ .text-arcane-btn-err {
362
+ color: var(--arcane-color-red);
363
+ }
364
+ .text-arcane-btn-text {
365
+ color: var(--arcane-text-normal);
366
+ }
367
+ .text-arcane-hint {
368
+ color: var(--arcane-hint);
369
+ }
370
+ .text-arcane-text {
371
+ color: var(--arcane-text-normal);
372
+ }
373
+ .text-arcane-text-muted {
374
+ color: var(--arcane-text-muted);
375
+ }
376
+ .opacity-0 {
377
+ opacity: 0%;
378
+ }
379
+ .opacity-100 {
380
+ opacity: 100%;
381
+ }
382
+ .\!shadow-arcane-btn-active {
383
+ --tw-shadow: inset 0 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.2)), 0 1px 0 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.15)) !important;
384
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
385
+ }
386
+ .shadow-arcane-box-inset {
387
+ --tw-shadow: var(--arcane-shadow-box-inset);
388
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
389
+ }
390
+ .shadow-arcane-btn {
391
+ --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.15)), 0 1px 0 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.25));
392
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
393
+ }
394
+ .shadow-arcane-btn-active {
395
+ --tw-shadow: inset 0 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.2)), 0 1px 0 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.15));
396
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
397
+ }
398
+ .transition-all {
399
+ transition-property: all;
400
+ transition-timing-function: var(--tw-ease, ease);
401
+ transition-duration: var(--tw-duration, 0s);
402
+ }
403
+ .transition-colors {
404
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
405
+ transition-timing-function: var(--tw-ease, ease);
406
+ transition-duration: var(--tw-duration, 0s);
407
+ }
408
+ .\!duration-50 {
409
+ --tw-duration: 50ms !important;
410
+ transition-duration: 50ms !important;
411
+ }
412
+ .duration-0 {
413
+ --tw-duration: 0ms;
414
+ transition-duration: 0ms;
415
+ }
416
+ .duration-50 {
417
+ --tw-duration: 50ms;
418
+ transition-duration: 50ms;
419
+ }
420
+ .duration-200 {
421
+ --tw-duration: 200ms;
422
+ transition-duration: 200ms;
423
+ }
424
+ .duration-300 {
425
+ --tw-duration: 300ms;
426
+ transition-duration: 300ms;
427
+ }
428
+ .outline-none {
429
+ --tw-outline-style: none;
430
+ outline-style: none;
431
+ }
432
+ .\!text-shadow-arcane-btn-active {
433
+ text-shadow: var(--arcane-shadow-text-active) !important;
434
+ }
435
+ .text-shadow-arcane-btn {
436
+ text-shadow: var(--arcane-shadow-text);
437
+ }
438
+ .text-shadow-arcane-btn-active {
439
+ text-shadow: var(--arcane-shadow-text-active);
440
+ }
441
+ .group-hover\:text-arcane-hint {
442
+ &:is(:where(.group):hover *) {
443
+ @media (hover: hover) {
444
+ color: var(--arcane-hint);
445
+ }
446
+ }
447
+ }
448
+ .before\:absolute {
449
+ &::before {
450
+ content: var(--tw-content);
451
+ position: absolute;
452
+ }
453
+ }
454
+ .before\:-top-\[5px\] {
455
+ &::before {
456
+ content: var(--tw-content);
457
+ top: calc(5px * -1);
458
+ }
459
+ }
460
+ .before\:-right-\[3px\] {
461
+ &::before {
462
+ content: var(--tw-content);
463
+ right: calc(3px * -1);
464
+ }
465
+ }
466
+ .before\:-bottom-\[5px\] {
467
+ &::before {
468
+ content: var(--tw-content);
469
+ bottom: calc(5px * -1);
470
+ }
471
+ }
472
+ .before\:w-\[4px\] {
473
+ &::before {
474
+ content: var(--tw-content);
475
+ width: 4px;
476
+ }
477
+ }
478
+ .before\:bg-arcane-btn-border {
479
+ &::before {
480
+ content: var(--tw-content);
481
+ background-color: var(--arcane-border-dark);
482
+ }
483
+ }
484
+ .after\:absolute {
485
+ &::after {
486
+ content: var(--tw-content);
487
+ position: absolute;
488
+ }
489
+ }
490
+ .after\:-top-\[4px\] {
491
+ &::after {
492
+ content: var(--tw-content);
493
+ top: calc(4px * -1);
494
+ }
495
+ }
496
+ .after\:-right-\[2px\] {
497
+ &::after {
498
+ content: var(--tw-content);
499
+ right: calc(2px * -1);
500
+ }
501
+ }
502
+ .after\:-bottom-\[4px\] {
503
+ &::after {
504
+ content: var(--tw-content);
505
+ bottom: calc(4px * -1);
506
+ }
507
+ }
508
+ .after\:w-\[2px\] {
509
+ &::after {
510
+ content: var(--tw-content);
511
+ width: 2px;
512
+ }
513
+ }
514
+ .after\:bg-arcane-btn-text {
515
+ &::after {
516
+ content: var(--tw-content);
517
+ background-color: var(--arcane-text-normal);
518
+ }
519
+ }
520
+ .hover\:bg-arcane-bg {
521
+ &:hover {
522
+ @media (hover: hover) {
523
+ background-color: var(--arcane-bg);
524
+ }
525
+ }
526
+ }
527
+ .hover\:bg-arcane-bg-light-1 {
528
+ &:hover {
529
+ @media (hover: hover) {
530
+ background-color: var(--arcane-bg-light-1);
531
+ }
532
+ }
533
+ }
534
+ .hover\:bg-arcane-grad-btn-hover {
535
+ &:hover {
536
+ @media (hover: hover) {
537
+ background-image: var(--arcane-gradient-button-hover);
538
+ }
539
+ }
540
+ }
541
+ .active\:bg-arcane-grad-btn-active {
542
+ &:active {
543
+ background-image: var(--arcane-gradient-button-active);
544
+ }
545
+ }
546
+ .active\:shadow-arcane-btn-active {
547
+ &:active {
548
+ --tw-shadow: inset 0 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.2)), 0 1px 0 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.15));
549
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
550
+ }
551
+ }
552
+ .active\:duration-50 {
553
+ &:active {
554
+ --tw-duration: 50ms;
555
+ transition-duration: 50ms;
556
+ }
557
+ }
558
+ .active\:text-shadow-arcane-btn-active {
559
+ &:active {
560
+ text-shadow: var(--arcane-shadow-text-active);
561
+ }
562
+ }
563
+ :root, :host {
564
+ --val-arcane-hint-rgb: var(--arcane-hint-rgb);
565
+ }
566
+ * {
567
+ box-sizing: border-box;
568
+ }
569
+ body {
570
+ background: var(--arcane-page-bg);
571
+ margin: 0;
572
+ padding: 0;
573
+ font-size: 14px;
574
+ font-family: sans-serif;
575
+ }
576
+ body.touch-mode * {
577
+ cursor: none !important;
578
+ }
579
+ .arcane-stage {
580
+ width: 100%;
581
+ height: 100%;
582
+ background: var(--arcane-page-bg);
583
+ color: var(--arcane-text-normal);
584
+ }
585
+ @property --tw-border-style {
586
+ syntax: "*";
587
+ inherits: false;
588
+ initial-value: solid;
589
+ }
590
+ @property --tw-leading {
591
+ syntax: "*";
592
+ inherits: false;
593
+ }
594
+ @property --tw-font-weight {
595
+ syntax: "*";
596
+ inherits: false;
597
+ }
598
+ @property --tw-tracking {
599
+ syntax: "*";
600
+ inherits: false;
601
+ }
602
+ @property --tw-shadow {
603
+ syntax: "*";
604
+ inherits: false;
605
+ initial-value: 0 0 #0000;
606
+ }
607
+ @property --tw-shadow-color {
608
+ syntax: "*";
609
+ inherits: false;
610
+ }
611
+ @property --tw-shadow-alpha {
612
+ syntax: "<percentage>";
613
+ inherits: false;
614
+ initial-value: 100%;
615
+ }
616
+ @property --tw-inset-shadow {
617
+ syntax: "*";
618
+ inherits: false;
619
+ initial-value: 0 0 #0000;
620
+ }
621
+ @property --tw-inset-shadow-color {
622
+ syntax: "*";
623
+ inherits: false;
624
+ }
625
+ @property --tw-inset-shadow-alpha {
626
+ syntax: "<percentage>";
627
+ inherits: false;
628
+ initial-value: 100%;
629
+ }
630
+ @property --tw-ring-color {
631
+ syntax: "*";
632
+ inherits: false;
633
+ }
634
+ @property --tw-ring-shadow {
635
+ syntax: "*";
636
+ inherits: false;
637
+ initial-value: 0 0 #0000;
638
+ }
639
+ @property --tw-inset-ring-color {
640
+ syntax: "*";
641
+ inherits: false;
642
+ }
643
+ @property --tw-inset-ring-shadow {
644
+ syntax: "*";
645
+ inherits: false;
646
+ initial-value: 0 0 #0000;
647
+ }
648
+ @property --tw-ring-inset {
649
+ syntax: "*";
650
+ inherits: false;
651
+ }
652
+ @property --tw-ring-offset-width {
653
+ syntax: "<length>";
654
+ inherits: false;
655
+ initial-value: 0px;
656
+ }
657
+ @property --tw-ring-offset-color {
658
+ syntax: "*";
659
+ inherits: false;
660
+ initial-value: #fff;
661
+ }
662
+ @property --tw-ring-offset-shadow {
663
+ syntax: "*";
664
+ inherits: false;
665
+ initial-value: 0 0 #0000;
666
+ }
667
+ @property --tw-duration {
668
+ syntax: "*";
669
+ inherits: false;
670
+ }
671
+ @property --tw-text-shadow-color {
672
+ syntax: "*";
673
+ inherits: false;
674
+ }
675
+ @property --tw-text-shadow-alpha {
676
+ syntax: "<percentage>";
677
+ inherits: false;
678
+ initial-value: 100%;
679
+ }
680
+ @property --tw-content {
681
+ syntax: "*";
682
+ initial-value: "";
683
+ inherits: false;
684
+ }
685
+ @layer properties {
686
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
687
+ *, ::before, ::after, ::backdrop {
688
+ --tw-border-style: solid;
689
+ --tw-leading: initial;
690
+ --tw-font-weight: initial;
691
+ --tw-tracking: initial;
692
+ --tw-shadow: 0 0 #0000;
693
+ --tw-shadow-color: initial;
694
+ --tw-shadow-alpha: 100%;
695
+ --tw-inset-shadow: 0 0 #0000;
696
+ --tw-inset-shadow-color: initial;
697
+ --tw-inset-shadow-alpha: 100%;
698
+ --tw-ring-color: initial;
699
+ --tw-ring-shadow: 0 0 #0000;
700
+ --tw-inset-ring-color: initial;
701
+ --tw-inset-ring-shadow: 0 0 #0000;
702
+ --tw-ring-inset: initial;
703
+ --tw-ring-offset-width: 0px;
704
+ --tw-ring-offset-color: #fff;
705
+ --tw-ring-offset-shadow: 0 0 #0000;
706
+ --tw-duration: initial;
707
+ --tw-text-shadow-color: initial;
708
+ --tw-text-shadow-alpha: 100%;
709
+ --tw-content: "";
710
+ }
711
+ }
712
+ }
713
+ .arcane-theme-root {
714
+ --arcane-page-bg: #f8f9fa;
715
+ --arcane-color-green: #22863a;
716
+ --arcane-color-red: #d73a49;
717
+ --arcane-color-amber: #b08800;
718
+ --arcane-bg-dark-1: #e9ecef;
719
+ --arcane-bg: #ffffff;
720
+ --arcane-bg-light-1: #f5f5f5;
721
+ --arcane-border-dark: #c7c7c7;
722
+ --arcane-border-light: #d7d7d7;
723
+ --arcane-border-lighter: #eaecef;
724
+ --arcane-border-lighterer: #f6f8fa;
725
+ --arcane-hint: #4286f4;
726
+ --arcane-hint-rgb: 0, 92, 197;
727
+ --arcane-hint-dark-1: #2a77f3;
728
+ --arcane-text-normal: #24292e;
729
+ --arcane-text-active: #202020;
730
+ --arcane-text-muted: #6a737d;
731
+ --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
732
+ --arcane-shadow-text: 0 1px rgba(255, 255, 255, 0.7);
733
+ --arcane-shadow-text-active: 0 1px rgba(255, 255, 255, 0.4);
734
+ --arcane-gradient-button: linear-gradient(to bottom, #e1e4e8, #d1d5da);
735
+ --arcane-gradient-button-hover: linear-gradient(to bottom, #d1d5da, #c1c6cc);
736
+ --arcane-gradient-button-active: linear-gradient(to bottom, #b1b6bc, #d2d6da);
737
+ --arcane-gradient-button-pressed-hover: linear-gradient(
738
+ to bottom,
739
+ #a1a6ac,
740
+ #91969c
741
+ );
742
+ --arcane-gradient-hint-pressed: linear-gradient(to bottom, #438bff, #85b3ff);
743
+ --arcane-spacing: 15px;
744
+ --arcane-unit-height: 40px;
745
+ }
746
+ .arcane-theme-root.theme-dark {
747
+ --arcane-page-bg: #333;
748
+ --arcane-color-green: #98c379;
749
+ --arcane-color-red: #e06c75;
750
+ --arcane-color-amber: #d19a66;
751
+ --arcane-bg-dark-1: #252524;
752
+ --arcane-bg: #2a2a2b;
753
+ --arcane-bg-light-1: #353638;
754
+ --arcane-border-dark: #151516;
755
+ --arcane-border-light: #1c1d1d;
756
+ --arcane-border-lighter: #252524;
757
+ --arcane-border-lighterer: #6b6b67;
758
+ --arcane-hint: #4286f4;
759
+ --arcane-hint-rgb: 66, 134, 244;
760
+ --arcane-hint-dark-1: #2a77f3;
761
+ --arcane-text-normal: #f3f3f5;
762
+ --arcane-text-active: #ffffff;
763
+ --arcane-text-muted: #777777;
764
+ --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
765
+ --arcane-shadow-text: 0 -1px rgba(0, 0, 0, 0.7);
766
+ --arcane-shadow-text-active: 0 -1px rgba(0, 0, 0, 0.4);
767
+ --arcane-gradient-button: linear-gradient(to bottom, #4f5053, #343436);
768
+ --arcane-gradient-button-hover: linear-gradient(to bottom, #5e6064, #393a3b);
769
+ --arcane-gradient-button-active: linear-gradient(to bottom, #242525, #37383a);
770
+ --arcane-gradient-button-pressed-hover: linear-gradient(
771
+ to bottom,
772
+ #282929,
773
+ #414243
774
+ );
775
+ --arcane-gradient-hint-pressed: linear-gradient(to bottom, #2a77f3, #4286f4);
776
+ }
777
+ @media (prefers-color-scheme: dark) {
778
+ .arcane-theme-root.theme-auto {
779
+ --arcane-page-bg: #333;
780
+ --arcane-color-green: #98c379;
781
+ --arcane-color-red: #e06c75;
782
+ --arcane-color-amber: #d19a66;
783
+ --arcane-bg-dark-1: #252524;
784
+ --arcane-bg: #2a2a2b;
785
+ --arcane-bg-light-1: #353638;
786
+ --arcane-border-dark: #151516;
787
+ --arcane-border-light: #1c1d1d;
788
+ --arcane-border-lighter: #252524;
789
+ --arcane-border-lighterer: #6b6b67;
790
+ --arcane-hint: #4286f4;
791
+ --arcane-hint-rgb: 66, 134, 244;
792
+ --arcane-hint-dark-1: #2a77f3;
793
+ --arcane-text-normal: #f3f3f5;
794
+ --arcane-text-active: #ffffff;
795
+ --arcane-text-muted: #777777;
796
+ --arcane-shadow-box-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
797
+ --arcane-shadow-text: 0 -1px rgba(0, 0, 0, 0.7);
798
+ --arcane-shadow-text-active: 0 -1px rgba(0, 0, 0, 0.4);
799
+ --arcane-gradient-button: linear-gradient(
800
+ to bottom,
801
+ #4f5053,
802
+ #343436
803
+ );
804
+ --arcane-gradient-button-hover: linear-gradient(
805
+ to bottom,
806
+ #5e6064,
807
+ #393a3b
808
+ );
809
+ --arcane-gradient-button-active: linear-gradient(
810
+ to bottom,
811
+ #242525,
812
+ #37383a
813
+ );
814
+ --arcane-gradient-button-pressed-hover: linear-gradient(
815
+ to bottom,
816
+ #282929,
817
+ #414243
818
+ );
819
+ --arcane-gradient-hint-pressed: linear-gradient(
820
+ to bottom,
821
+ #2a77f3,
822
+ #4286f4
823
+ );
824
+ }
825
+ }
826
+ .absolute {
827
+ position: absolute;
828
+ }
829
+ .relative {
830
+ position: relative;
831
+ }
832
+ .inset-0 {
833
+ inset: 0px;
834
+ }
835
+ .inset-y-0 {
836
+ inset-block: 0px;
837
+ }
838
+ .left-0 {
839
+ left: 0px;
840
+ }
841
+ .m-0\.25 {
842
+ margin: calc(var(--arcane-spacing) / 8);
843
+ }
844
+ .control-grid-large {
845
+ display: grid;
846
+ grid-template-columns: [label-start] max-content [label-end input-1-start] max-content [input-1-end input-2-start] 1fr [input-2-end input-extra-start] max-content [input-extra-end];
847
+ padding: var(--arcane-spacing);
848
+ gap: var(--arcane-spacing);
849
+ font-size: 0.8rem;
850
+ }
851
+ .flex {
852
+ display: flex;
853
+ }
854
+ .grid {
855
+ display: grid;
856
+ }
857
+ .size-full {
858
+ width: 100%;
859
+ height: 100%;
860
+ }
861
+ .h-0 {
862
+ height: 0px;
863
+ }
864
+ .h-1 {
865
+ height: calc(var(--arcane-spacing) / 2);
866
+ }
867
+ .h-full {
868
+ height: 100%;
869
+ }
870
+ .h-screen {
871
+ height: 100vh;
872
+ }
873
+ .min-h-\[36px\] {
874
+ min-height: 36px;
875
+ }
876
+ .min-h-timecode-min-height {
877
+ min-height: var(--timecode-min-height);
878
+ }
879
+ .w-full {
880
+ width: 100%;
881
+ }
882
+ .grow {
883
+ flex-grow: 1;
884
+ }
885
+ .basis-0 {
886
+ flex-basis: 0px;
887
+ }
888
+ .cursor-pointer {
889
+ cursor: pointer;
890
+ }
891
+ .grid-cols-1 {
892
+ grid-template-columns: repeat(1, minmax(0, 1fr));
893
+ }
894
+ .flex-col {
895
+ flex-direction: column;
896
+ }
897
+ .flex-wrap {
898
+ flex-wrap: wrap;
899
+ }
900
+ .items-center {
901
+ align-items: center;
902
+ }
903
+ .items-start {
904
+ align-items: flex-start;
905
+ }
906
+ .justify-center {
907
+ justify-content: center;
908
+ }
909
+ .gap-0\.5 {
910
+ gap: calc(var(--arcane-spacing) / 4);
911
+ }
912
+ .gap-0\.25 {
913
+ gap: calc(var(--arcane-spacing) / 8);
914
+ }
915
+ .gap-1 {
916
+ gap: calc(var(--arcane-spacing) / 2);
917
+ }
918
+ .gap-px {
919
+ gap: 1px;
920
+ }
921
+ .truncate {
922
+ overflow: hidden;
923
+ text-overflow: ellipsis;
924
+ white-space: nowrap;
925
+ }
926
+ .overflow-hidden {
927
+ overflow: hidden;
928
+ }
929
+ .overflow-y-auto {
930
+ overflow-y: auto;
931
+ }
932
+ .rounded-md {
933
+ border-radius: calc(var(--arcane-spacing) * 6 / 15);
934
+ }
935
+ .border {
936
+ border-style: var(--tw-border-style);
937
+ border-width: 1px;
938
+ }
939
+ .border-t {
940
+ border-top-style: var(--tw-border-style);
941
+ border-top-width: 1px;
942
+ }
943
+ .border-sigil-bg-light {
944
+ border-color: var(--sigil-bg-light);
945
+ }
946
+ .border-sigil-border {
947
+ border-color: var(--sigil-border);
948
+ }
949
+ .border-timecode-usage-foreground {
950
+ border-color: var(--timecode-usage-foreground);
951
+ }
952
+ .bg-sigil-bg-dark {
953
+ background-color: var(--sigil-bg-dark);
954
+ }
955
+ .bg-sigil-bg-light {
956
+ background-color: var(--sigil-bg-light);
957
+ }
958
+ .bg-sigil-border {
959
+ background-color: var(--sigil-border);
960
+ }
961
+ .bg-sigil-usage-red-background {
962
+ background-color: var(--sigil-usage-red-background);
963
+ }
964
+ .bg-timecode-backdrop {
965
+ background-color: oklch(
966
+ from var(--timecode-usage-foreground) l c h / calc(alpha * 0.25)
967
+ );
968
+ }
969
+ .bg-timecode-usage-foreground {
970
+ background-color: var(--timecode-usage-foreground);
971
+ }
972
+ .p-0\.5 {
973
+ padding: calc(var(--arcane-spacing) / 4);
974
+ }
975
+ .p-1 {
976
+ padding: calc(var(--arcane-spacing) / 2);
977
+ }
978
+ .p-px {
979
+ padding: 1px;
980
+ }
981
+ .px-1 {
982
+ padding-inline: calc(var(--arcane-spacing) / 2);
983
+ }
984
+ .py-0\.25 {
985
+ padding-block: calc(var(--arcane-spacing) / 8);
986
+ }
987
+ .text-center {
988
+ text-align: center;
989
+ }
990
+ .font-mono {
991
+ font-family: var(--font-mono);
992
+ }
993
+ .text-\[80\%\] {
994
+ font-size: 80%;
995
+ }
996
+ .text-arcane-normal {
997
+ font-size: 1em;
998
+ }
999
+ .text-block-icon {
1000
+ font-size: max(
1001
+ 2rem,
1002
+ min(calc(var(--size-aware-div-width) * 0.05), 5rem)
1003
+ );
1004
+ }
1005
+ .text-sigil-control {
1006
+ font-size: var(--sigil-control-font-size);
1007
+ }
1008
+ .text-timecode-adaptive {
1009
+ font-size: max(
1010
+ var(--timecode-min-height),
1011
+ min(
1012
+ calc(var(--size-aware-div-height) * 0.7),
1013
+ calc(var(--size-aware-div-width) * 0.13)
1014
+ )
1015
+ );
1016
+ }
1017
+ .font-bold {
1018
+ --tw-font-weight: 700;
1019
+ font-weight: 700;
1020
+ }
1021
+ .text-sigil-foreground-muted {
1022
+ color: var(--sigil-foreground-muted);
1023
+ }
1024
+ .text-sigil-usage-hint-foreground {
1025
+ color: var(--sigil-usage-hint-foreground);
1026
+ }
1027
+ .text-sigil-usage-red-text {
1028
+ color: var(--sigil-usage-red-text);
1029
+ }
1030
+ .text-timecode-usage-foreground {
1031
+ color: var(--timecode-usage-foreground);
1032
+ }
1033
+ .text-timecode-usage-foreground\! {
1034
+ color: var(--timecode-usage-foreground) !important;
1035
+ }
1036
+ .text-timecode-usage-text {
1037
+ color: var(--timecode-usage-text);
1038
+ }
1039
+ .italic {
1040
+ font-style: italic;
1041
+ }
1042
+ .no-underline {
1043
+ text-decoration-line: none;
1044
+ }
1045
+ .opacity-50 {
1046
+ opacity: 50%;
1047
+ }
1048
+ .text-hint-gradient {
1049
+ background: linear-gradient( to bottom right, var(--sigil-usage-hint-gradient-light), var(--sigil-usage-hint-gradient-dark) );
1050
+ -webkit-background-clip: text;
1051
+ -webkit-text-fill-color: transparent;
1052
+ }
1053
+ .app-title-bar {
1054
+ app-region: drag;
1055
+ }
1056
+ .scrollbar-sigil {
1057
+ scrollbar-color: var(--sigil-bg-light) var(--sigil-border);
1058
+ }
1059
+ .writing-mode-vertical-rl {
1060
+ writing-mode: vertical-rl;
1061
+ }
1062
+ .hover\:bg-timecode-backdrop-hover {
1063
+ &:hover {
1064
+ @media (hover: hover) {
1065
+ background-color: oklch(
1066
+ from var(--timecode-usage-foreground) l c h / calc(alpha * 0.5)
1067
+ );
1068
+ }
1069
+ }
1070
+ }
1071
+ .hover\:underline {
1072
+ &:hover {
1073
+ @media (hover: hover) {
1074
+ text-decoration-line: underline;
1075
+ }
1076
+ }
1077
+ }
1078
+ .hover\:opacity-100 {
1079
+ &:hover {
1080
+ @media (hover: hover) {
1081
+ opacity: 100%;
1082
+ }
1083
+ }
1084
+ }
1085
+ .min-\[600px\]\:grid-cols-2 {
1086
+ @media (width >= 600px) {
1087
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1088
+ }
1089
+ }
1090
+ .min-\[900px\]\:grid-cols-3 {
1091
+ @media (width >= 900px) {
1092
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1093
+ }
1094
+ }
1095
+ :root, :host {
1096
+ --val-arcane-hint-rgb: var(--arcane-hint-rgb);
1097
+ --font-mono: var(--font-mono);
1098
+ }
1099
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
1100
+ @layer properties;
1101
+ .relative {
1102
+ position: relative;
1103
+ }
1104
+ .z-sigil-select-content {
1105
+ z-index: 190;
1106
+ }
1107
+ .z-sigil-toolbar {
1108
+ z-index: 160;
1109
+ }
1110
+ .z-sigil-tooltip {
1111
+ z-index: 190;
1112
+ }
1113
+ .control-grid-pos-all {
1114
+ grid-column: input-1-start / input-extra-end;
1115
+ grid-row: auto / span 1;
1116
+ }
1117
+ .control-grid-pos-both {
1118
+ grid-column: input-1-start / input-2-end;
1119
+ grid-row: auto / span 1;
1120
+ }
1121
+ .control-grid-pos-extra {
1122
+ grid-column: input-extra-start / input-extra-end;
1123
+ grid-row: auto / span 1;
1124
+ }
1125
+ .control-grid-pos-first {
1126
+ grid-column: input-1-start / input-1-end;
1127
+ grid-row: auto / span 1;
1128
+ }
1129
+ .control-grid-pos-label {
1130
+ grid-column: label-start / label-end;
1131
+ grid-row: auto / span 1;
1132
+ }
1133
+ .control-grid-pos-row {
1134
+ grid-column: label-start / input-extra-end;
1135
+ grid-row: auto / span 1;
1136
+ }
1137
+ .control-grid-pos-second {
1138
+ grid-column: input-2-start / input-2-end;
1139
+ grid-row: auto / span 1;
1140
+ }
1141
+ .col-\[1\/span_1\] {
1142
+ grid-column: 1/span 1;
1143
+ }
1144
+ .col-\[2\/span_1\] {
1145
+ grid-column: 2/span 1;
1146
+ }
1147
+ .col-\[3\/span_1\] {
1148
+ grid-column: 3/span 1;
1149
+ }
1150
+ .m-0 {
1151
+ margin: 0px;
1152
+ }
1153
+ .mx-0 {
1154
+ margin-inline: 0px;
1155
+ }
1156
+ .mx-sigil-toolbar-gap {
1157
+ margin-inline: calc(var(--sigil-toolbar-spacing-px) / 2);
1158
+ }
1159
+ .-my-text-1 {
1160
+ margin-block: calc(1rem * -1);
1161
+ }
1162
+ .my-0\.6 {
1163
+ margin-block: calc(var(--arcane-spacing) / 3);
1164
+ }
1165
+ .mt-arcane {
1166
+ margin-top: var(--arcane-spacing);
1167
+ }
1168
+ .-mr-text-0\.5 {
1169
+ margin-right: calc(0.5rem * -1);
1170
+ }
1171
+ .-ml-text-0\.25 {
1172
+ margin-left: calc(0.25rem * -1);
1173
+ }
1174
+ .ml-2 {
1175
+ margin-left: calc(var(--arcane-spacing));
1176
+ }
1177
+ .sigil-control-button {
1178
+ background: none;
1179
+ border: none;
1180
+ border-top: 0 solid transparent;
1181
+ color: var(--sigil-control-button-fg);
1182
+ padding: calc(var(--arcane-spacing) / 6);
1183
+ cursor: pointer;
1184
+ outline: none;
1185
+ display: flex;
1186
+ align-items: stretch;
1187
+ flex-basis: 0;
1188
+ & > span {
1189
+ display: flex;
1190
+ align-items: center;
1191
+ justify-content: center;
1192
+ flex-grow: 1;
1193
+ border-radius: 2px;
1194
+ padding: calc(var(--arcane-spacing) / 6) calc(var(--arcane-spacing) / 3);
1195
+ overflow: hidden;
1196
+ white-space: nowrap;
1197
+ gap: calc(var(--arcane-spacing) / 3);
1198
+ background: var(--sigil-control-button-bg);
1199
+ border: 1px solid var(--sigil-control-button-border);
1200
+ }
1201
+ &:focus {
1202
+ > span {
1203
+ background: var(--sigil-control-button-bg-hover);
1204
+ color: var(--sigil-control-button-fg-hover);
1205
+ border-color: var(--sigil-control-button-border-hover);
1206
+ }
1207
+ }
1208
+ &:hover {
1209
+ border-color: var(--sigil-foreground-highlight);
1210
+ > span {
1211
+ background: var(--sigil-control-button-bg-hover);
1212
+ color: var(--sigil-control-button-fg-hover);
1213
+ border-color: var(--sigil-control-button-border-hover);
1214
+ }
1215
+ }
1216
+ &:disabled {
1217
+ cursor: not-allowed;
1218
+ opacity: 0.5;
1219
+ &:hover, &:focus {
1220
+ border-color: transparent;
1221
+ > span {
1222
+ background: none;
1223
+ color: inherit;
1224
+ border-color: transparent;
1225
+ }
1226
+ }
1227
+ }
1228
+ }
1229
+ .control-grid-large {
1230
+ display: grid;
1231
+ grid-template-columns: [label-start] max-content [label-end input-1-start] max-content [input-1-end input-2-start] 1fr [input-2-end input-extra-start] max-content [input-extra-end];
1232
+ padding: var(--arcane-spacing);
1233
+ gap: var(--arcane-spacing);
1234
+ font-size: 0.8rem;
1235
+ }
1236
+ .control-grid {
1237
+ display: grid;
1238
+ grid-template-columns: [label-start] max-content [label-end input-1-start] max-content [input-1-end input-2-start] 1fr [input-2-end input-extra-end];
1239
+ grid-gap: var(--sigil-control-gap);
1240
+ padding: var(--sigil-control-gap);
1241
+ font-size: var(--sigil-control-font-size);
1242
+ }
1243
+ .contents {
1244
+ display: contents;
1245
+ }
1246
+ .flex {
1247
+ display: flex;
1248
+ }
1249
+ .table-row {
1250
+ display: table-row;
1251
+ }
1252
+ .h-sigil-toolbar-divider {
1253
+ height: 1.2rem;
1254
+ }
1255
+ .w-full {
1256
+ width: 100%;
1257
+ }
1258
+ .w-px {
1259
+ width: 1px;
1260
+ }
1261
+ .max-w-\[80vw\] {
1262
+ max-width: 80vw;
1263
+ }
1264
+ .min-w-\[5rem\] {
1265
+ min-width: 5rem;
1266
+ }
1267
+ .min-w-\[10vw\] {
1268
+ min-width: 10vw;
1269
+ }
1270
+ .flex-1 {
1271
+ flex: 1;
1272
+ }
1273
+ .grow {
1274
+ flex-grow: 1;
1275
+ }
1276
+ .basis-0 {
1277
+ flex-basis: 0px;
1278
+ }
1279
+ .cursor-pointer {
1280
+ cursor: pointer;
1281
+ }
1282
+ .resize {
1283
+ resize: both;
1284
+ }
1285
+ .flex-col {
1286
+ flex-direction: column;
1287
+ }
1288
+ .flex-wrap {
1289
+ flex-wrap: wrap;
1290
+ }
1291
+ .items-center {
1292
+ align-items: center;
1293
+ }
1294
+ .items-stretch {
1295
+ align-items: stretch;
1296
+ }
1297
+ .justify-center {
1298
+ justify-content: center;
1299
+ }
1300
+ .justify-end {
1301
+ justify-content: flex-end;
1302
+ }
1303
+ .justify-start {
1304
+ justify-content: flex-start;
1305
+ }
1306
+ .gap-0\.6 {
1307
+ gap: calc(var(--arcane-spacing) / 3);
1308
+ }
1309
+ .gap-1 {
1310
+ gap: calc(var(--arcane-spacing) / 2);
1311
+ }
1312
+ .gap-2 {
1313
+ gap: calc(var(--arcane-spacing));
1314
+ }
1315
+ .gap-sigil-control-gap {
1316
+ gap: var(--sigil-control-gap);
1317
+ }
1318
+ .gap-sigil-toolbar-gap {
1319
+ gap: calc(var(--sigil-toolbar-spacing-px) / 2);
1320
+ }
1321
+ .truncate {
1322
+ overflow: hidden;
1323
+ text-overflow: ellipsis;
1324
+ white-space: nowrap;
1325
+ }
1326
+ .overflow-auto {
1327
+ overflow: auto;
1328
+ }
1329
+ .overflow-hidden {
1330
+ overflow: hidden;
1331
+ }
1332
+ .overflow-x-auto {
1333
+ overflow-x: auto;
1334
+ }
1335
+ .sigil-control-button-variant-table-row {
1336
+ padding: 0;
1337
+ > span {
1338
+ border-radius: 0;
1339
+ padding: calc(var(--arcane-spacing) / 2) calc(var(--arcane-spacing) / 1.5);
1340
+ }
1341
+ }
1342
+ .rounded-\[2px\] {
1343
+ border-radius: 2px;
1344
+ }
1345
+ .rounded-sigil-control {
1346
+ border-radius: 4px;
1347
+ }
1348
+ .sigil-control-button-variant-titlebar {
1349
+ > span {
1350
+ border-radius: 6px;
1351
+ }
1352
+ }
1353
+ .border {
1354
+ border-style: var(--tw-border-style);
1355
+ border-width: 1px;
1356
+ }
1357
+ .border-0 {
1358
+ border-style: var(--tw-border-style);
1359
+ border-width: 0px;
1360
+ }
1361
+ .sigil-control-button-variant-border {
1362
+ border-top-width: 2px;
1363
+ }
1364
+ .border-b {
1365
+ border-bottom-style: var(--tw-border-style);
1366
+ border-bottom-width: 1px;
1367
+ }
1368
+ .border-none {
1369
+ --tw-border-style: none;
1370
+ border-style: none;
1371
+ }
1372
+ .sigil-control-button-active {
1373
+ border-color: var(--sigil-usage-hint-foreground);
1374
+ > span {
1375
+ background: var(--sigil-control-button-bg-active);
1376
+ color: var(--sigil-control-button-fg-active);
1377
+ border-color: var(--sigil-control-button-border-active);
1378
+ }
1379
+ &:hover, &:focus {
1380
+ > span {
1381
+ color: var(--sigil-control-button-fg-active);
1382
+ background: var(--sigil-control-button-bg-hover);
1383
+ }
1384
+ }
1385
+ }
1386
+ .sigil-control-button-touching {
1387
+ border-color: var(--sigil-foreground-highlight);
1388
+ > span {
1389
+ background: var(--sigil-control-button-bg-hover);
1390
+ color: var(--sigil-control-button-fg-hover);
1391
+ border-color: var(--sigil-control-button-border-hover);
1392
+ }
1393
+ }
1394
+ .border-sigil-border {
1395
+ border-color: var(--sigil-border);
1396
+ }
1397
+ .border-sigil-usage-green-dimmed-border {
1398
+ border-color: var( --sigil-usage-green-dimmed-border );
1399
+ }
1400
+ .border-sigil-usage-red-dimmed-border {
1401
+ border-color: var(--sigil-usage-red-dimmed-border);
1402
+ }
1403
+ .border-sigil-usage-yellow-dimmed-border {
1404
+ border-color: var( --sigil-usage-yellow-dimmed-border );
1405
+ }
1406
+ .border-transparent {
1407
+ border-color: transparent;
1408
+ }
1409
+ .bg-sigil-bg-dark {
1410
+ background-color: var(--sigil-bg-dark);
1411
+ }
1412
+ .bg-sigil-bg-light {
1413
+ background-color: var(--sigil-bg-light);
1414
+ }
1415
+ .bg-sigil-border {
1416
+ background-color: var(--sigil-border);
1417
+ }
1418
+ .bg-sigil-usage-green-dimmed-background {
1419
+ background-color: var( --sigil-usage-green-dimmed-background );
1420
+ }
1421
+ .bg-sigil-usage-hint-background {
1422
+ background-color: var(--sigil-usage-hint-background);
1423
+ }
1424
+ .bg-sigil-usage-red-dimmed-background {
1425
+ background-color: var( --sigil-usage-red-dimmed-background );
1426
+ }
1427
+ .bg-sigil-usage-yellow-dimmed-background {
1428
+ background-color: var( --sigil-usage-yellow-dimmed-background );
1429
+ }
1430
+ .fill-sigil-usage-hint-background {
1431
+ fill: var(--sigil-usage-hint-background);
1432
+ }
1433
+ .sigil-control-button-variant-large {
1434
+ padding: 0;
1435
+ > span {
1436
+ padding: calc(var(--arcane-spacing) / 3) calc(var(--arcane-spacing) / 1.5);
1437
+ }
1438
+ }
1439
+ .sigil-control-button-variant-properties {
1440
+ padding: 0;
1441
+ > span {
1442
+ padding: calc(var(--arcane-spacing) / 2.5) calc(var(--arcane-spacing) / 1.5);
1443
+ }
1444
+ }
1445
+ .sigil-control-button-variant-toolbar {
1446
+ padding: 0 calc(var(--arcane-spacing) / 6);
1447
+ > span {
1448
+ padding: calc(var(--arcane-spacing) / 3) calc(var(--arcane-spacing) / 2);
1449
+ }
1450
+ }
1451
+ .p-0 {
1452
+ padding: 0px;
1453
+ }
1454
+ .p-0\.6 {
1455
+ padding: calc(var(--arcane-spacing) / 3);
1456
+ }
1457
+ .p-1 {
1458
+ padding: calc(var(--arcane-spacing) / 2);
1459
+ }
1460
+ .p-2 {
1461
+ padding: calc(var(--arcane-spacing));
1462
+ }
1463
+ .p-arcane {
1464
+ padding: var(--arcane-spacing);
1465
+ }
1466
+ .p-sigil-toolbar-gap {
1467
+ padding: calc(var(--sigil-toolbar-spacing-px) / 2);
1468
+ }
1469
+ .px-0\.3 {
1470
+ padding-inline: calc(var(--arcane-spacing) / 6);
1471
+ }
1472
+ .px-1 {
1473
+ padding-inline: calc(var(--arcane-spacing) / 2);
1474
+ }
1475
+ .px-1\.5 {
1476
+ padding-inline: calc(var(--arcane-spacing) / 2 * 3);
1477
+ }
1478
+ .px-arcane {
1479
+ padding-inline: var(--arcane-spacing);
1480
+ }
1481
+ .px-arcane-slider-input-hidden {
1482
+ padding-inline: 9px;
1483
+ }
1484
+ .px-sigil-toolbar-gap {
1485
+ padding-inline: calc(var(--sigil-toolbar-spacing-px) / 2);
1486
+ }
1487
+ .py-0\.5 {
1488
+ padding-block: calc(var(--arcane-spacing) / 4);
1489
+ }
1490
+ .py-0\.6 {
1491
+ padding-block: calc(var(--arcane-spacing) / 3);
1492
+ }
1493
+ .py-\[7px\] {
1494
+ padding-block: 7px;
1495
+ }
1496
+ .py-sigil-toolbar-padding {
1497
+ padding-block: var(--sigil-toolbar-spacing-px);
1498
+ }
1499
+ .text-center {
1500
+ text-align: center;
1501
+ }
1502
+ .text-\[0\.7rem\] {
1503
+ font-size: 0.7rem;
1504
+ }
1505
+ .text-\[0\.8rem\] {
1506
+ font-size: 0.8rem;
1507
+ }
1508
+ .text-\[1\.5rem\] {
1509
+ font-size: 1.5rem;
1510
+ }
1511
+ .text-\[120\%\] {
1512
+ font-size: 120%;
1513
+ }
1514
+ .text-\[150\%\] {
1515
+ font-size: 150%;
1516
+ }
1517
+ .text-arcane-normal {
1518
+ font-size: 1em;
1519
+ }
1520
+ .leading-\[1\.5\] {
1521
+ --tw-leading: 1.5;
1522
+ line-height: 1.5;
1523
+ }
1524
+ .font-bold {
1525
+ --tw-font-weight: 700;
1526
+ font-weight: 700;
1527
+ }
1528
+ .whitespace-pre-wrap {
1529
+ white-space: pre-wrap;
1530
+ }
1531
+ .text-sigil-dialog-foreground {
1532
+ color: var(--arcane-text-normal);
1533
+ }
1534
+ .text-sigil-foreground {
1535
+ color: var(--sigil-foreground);
1536
+ }
1537
+ .text-sigil-foreground-muted {
1538
+ color: var(--sigil-foreground-muted);
1539
+ }
1540
+ .text-sigil-usage-blue-foreground {
1541
+ color: var(--sigil-usage-blue-foreground);
1542
+ }
1543
+ .text-sigil-usage-green-text {
1544
+ color: var(--sigil-usage-green-text);
1545
+ }
1546
+ .text-sigil-usage-hint-text {
1547
+ color: var(--sigil-usage-hint-text);
1548
+ }
1549
+ .text-sigil-usage-red-foreground {
1550
+ color: var(--sigil-usage-red-foreground);
1551
+ }
1552
+ .text-sigil-usage-red-text {
1553
+ color: var(--sigil-usage-red-text);
1554
+ }
1555
+ .text-sigil-usage-yellow-foreground {
1556
+ color: var(--sigil-usage-yellow-foreground);
1557
+ }
1558
+ .text-sigil-usage-yellow-text {
1559
+ color: var(--sigil-usage-yellow-text);
1560
+ }
1561
+ .opacity-50 {
1562
+ opacity: 50%;
1563
+ }
1564
+ .opacity-60 {
1565
+ opacity: 60%;
1566
+ }
1567
+ .shadow-none {
1568
+ --tw-shadow: 0 0 #0000;
1569
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1570
+ }
1571
+ .shadow-sigil-box {
1572
+ --tw-shadow: var(--sigil-box-shadow);
1573
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1574
+ }
1575
+ .drop-shadow-sigil-tooltip-arrow {
1576
+ --tw-drop-shadow-size: drop-shadow(0px 2px 2px var(--tw-drop-shadow-color, rgba(0, 0, 0, 0.5)));
1577
+ --tw-drop-shadow: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
1578
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1579
+ }
1580
+ .outline-none {
1581
+ --tw-outline-style: none;
1582
+ outline-style: none;
1583
+ }
1584
+ .select-none {
1585
+ -webkit-user-select: none;
1586
+ user-select: none;
1587
+ }
1588
+ .backdrop-sigil-dialog {
1589
+ &::backdrop {
1590
+ background: rgb(0 0 0 / 50%);
1591
+ }
1592
+ }
1593
+ .scrollbar-sigil {
1594
+ scrollbar-color: var(--sigil-bg-light) var(--sigil-border);
1595
+ }
1596
+ .sigil-control-button-active-touching {
1597
+ > span {
1598
+ background: var(--sigil-control-button-bg-hover);
1599
+ }
1600
+ }
1601
+ .focus\:border-2 {
1602
+ &:focus {
1603
+ border-style: var(--tw-border-style);
1604
+ border-width: 2px;
1605
+ }
1606
+ }
1607
+ .focus\:border-sigil-usage-hint-foreground {
1608
+ &:focus {
1609
+ border-color: var(--sigil-usage-hint-foreground);
1610
+ }
1611
+ }
1612
+ .focus\:bg-sigil-bg-dark-1 {
1613
+ &:focus {
1614
+ background-color: var(--sigil-bg-dark-1);
1615
+ }
1616
+ }
1617
+ .focus\:px-\[7px\] {
1618
+ &:focus {
1619
+ padding-inline: 7px;
1620
+ }
1621
+ }
1622
+ .focus\:py-arcane-slider-input-px {
1623
+ &:focus {
1624
+ padding-block: 5px;
1625
+ }
1626
+ }
1627
+ .focus\:text-sigil-usage-hint-foreground {
1628
+ &:focus {
1629
+ color: var(--sigil-usage-hint-foreground);
1630
+ }
1631
+ }
1632
+ .focus\:outline-none {
1633
+ &:focus {
1634
+ --tw-outline-style: none;
1635
+ outline-style: none;
1636
+ }
1637
+ }
1638
+ .disabled\:opacity-50 {
1639
+ &:disabled {
1640
+ opacity: 50%;
1641
+ }
1642
+ }
1643
+ .data-highlighted\:bg-sigil-border {
1644
+ &[data-highlighted] {
1645
+ background-color: var(--sigil-border);
1646
+ }
1647
+ }
1648
+ .data-highlighted\:text-sigil-foreground-highlight {
1649
+ &[data-highlighted] {
1650
+ color: var(--sigil-foreground-highlight);
1651
+ }
1652
+ }
1653
+ .data-\[state\=\'checked\'\]\:text-sigil-usage-hint-foreground {
1654
+ &[data-state='checked'] {
1655
+ color: var(--sigil-usage-hint-foreground);
1656
+ }
1657
+ }
1658
+ .max-\[550px\]\:hidden {
1659
+ @media (width < 550px) {
1660
+ display: none;
1661
+ }
1662
+ }
1663
+ .\[\&\:\:-webkit-inner-spin-button\]\:opacity-20 {
1664
+ &::-webkit-inner-spin-button {
1665
+ opacity: 20%;
1666
+ }
1667
+ }
1668
+ .focus\:\[\&\:\:-webkit-inner-spin-button\]\:opacity-50 {
1669
+ &:focus {
1670
+ &::-webkit-inner-spin-button {
1671
+ opacity: 50%;
1672
+ }
1673
+ }
1674
+ }
1675
+ .\[\&\:\:-webkit-outer-spin-button\]\:opacity-20 {
1676
+ &::-webkit-outer-spin-button {
1677
+ opacity: 20%;
1678
+ }
1679
+ }
1680
+ .focus\:\[\&\:\:-webkit-outer-spin-button\]\:opacity-50 {
1681
+ &:focus {
1682
+ &::-webkit-outer-spin-button {
1683
+ opacity: 50%;
1684
+ }
1685
+ }
1686
+ }
1687
+ .\[\&\>button\]\:grow {
1688
+ &>button {
1689
+ flex-grow: 1;
1690
+ }
1691
+ }
1692
+ :root {
1693
+ --sigil-control-gap: 1px;
1694
+ --sigil-control-font-size: 0.7rem;
1695
+ }
1696
+ .arcane-theme-root {
1697
+ --sigil-control-button-bg: transparent;
1698
+ --sigil-control-button-bg-hover: var(--sigil-border);
1699
+ --sigil-control-button-bg-active: var(--sigil-bg-light);
1700
+ --sigil-control-button-fg: var(--sigil-foreground);
1701
+ --sigil-control-button-fg-hover: var(--sigil-foreground-highlight);
1702
+ --sigil-control-button-fg-active: var(--sigil-usage-hint-foreground);
1703
+ --sigil-control-button-border: transparent;
1704
+ --sigil-control-button-border-hover: var(--sigil-border);
1705
+ --sigil-control-button-border-active: var(--sigil-bg-light);
1706
+ }
1707
+ @property --tw-blur {
1708
+ syntax: "*";
1709
+ inherits: false;
1710
+ }
1711
+ @property --tw-brightness {
1712
+ syntax: "*";
1713
+ inherits: false;
1714
+ }
1715
+ @property --tw-contrast {
1716
+ syntax: "*";
1717
+ inherits: false;
1718
+ }
1719
+ @property --tw-grayscale {
1720
+ syntax: "*";
1721
+ inherits: false;
1722
+ }
1723
+ @property --tw-hue-rotate {
1724
+ syntax: "*";
1725
+ inherits: false;
1726
+ }
1727
+ @property --tw-invert {
1728
+ syntax: "*";
1729
+ inherits: false;
1730
+ }
1731
+ @property --tw-opacity {
1732
+ syntax: "*";
1733
+ inherits: false;
1734
+ }
1735
+ @property --tw-saturate {
1736
+ syntax: "*";
1737
+ inherits: false;
1738
+ }
1739
+ @property --tw-sepia {
1740
+ syntax: "*";
1741
+ inherits: false;
1742
+ }
1743
+ @property --tw-drop-shadow {
1744
+ syntax: "*";
1745
+ inherits: false;
1746
+ }
1747
+ @property --tw-drop-shadow-color {
1748
+ syntax: "*";
1749
+ inherits: false;
1750
+ }
1751
+ @property --tw-drop-shadow-alpha {
1752
+ syntax: "<percentage>";
1753
+ inherits: false;
1754
+ initial-value: 100%;
1755
+ }
1756
+ @property --tw-drop-shadow-size {
1757
+ syntax: "*";
1758
+ inherits: false;
1759
+ }
1760
+ @layer properties {
1761
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1762
+ *, ::before, ::after, ::backdrop {
1763
+ --tw-border-style: solid;
1764
+ --tw-leading: initial;
1765
+ --tw-font-weight: initial;
1766
+ --tw-shadow: 0 0 #0000;
1767
+ --tw-shadow-color: initial;
1768
+ --tw-shadow-alpha: 100%;
1769
+ --tw-inset-shadow: 0 0 #0000;
1770
+ --tw-inset-shadow-color: initial;
1771
+ --tw-inset-shadow-alpha: 100%;
1772
+ --tw-ring-color: initial;
1773
+ --tw-ring-shadow: 0 0 #0000;
1774
+ --tw-inset-ring-color: initial;
1775
+ --tw-inset-ring-shadow: 0 0 #0000;
1776
+ --tw-ring-inset: initial;
1777
+ --tw-ring-offset-width: 0px;
1778
+ --tw-ring-offset-color: #fff;
1779
+ --tw-ring-offset-shadow: 0 0 #0000;
1780
+ --tw-blur: initial;
1781
+ --tw-brightness: initial;
1782
+ --tw-contrast: initial;
1783
+ --tw-grayscale: initial;
1784
+ --tw-hue-rotate: initial;
1785
+ --tw-invert: initial;
1786
+ --tw-opacity: initial;
1787
+ --tw-saturate: initial;
1788
+ --tw-sepia: initial;
1789
+ --tw-drop-shadow: initial;
1790
+ --tw-drop-shadow-color: initial;
1791
+ --tw-drop-shadow-alpha: 100%;
1792
+ --tw-drop-shadow-size: initial;
1793
+ }
1794
+ }
1795
+ }
1796
+ :root {
1797
+ --sigil-palette-purple-hue: 258;
1798
+ --sigil-palette-purple-c900: #311b92;
1799
+ --sigil-palette-purple-normal: #512da8;
1800
+ --sigil-palette-purple-c600: #5e35b1;
1801
+ --sigil-palette-purple-c500: #673ab7;
1802
+ --sigil-palette-purple-light: #7e57c2;
1803
+ --sigil-palette-purple-c300: #9575cd;
1804
+ --sigil-palette-purple-extra-light: #b39ddb;
1805
+ --sigil-palette-purple-text-override: rgba(255, 255, 255, 0.8);
1806
+ --sigil-palette-purple-foreground-dark-override: #673ab7;
1807
+ --sigil-palette-blue-hue: 210;
1808
+ --sigil-palette-blue-c900: #0d47a1;
1809
+ --sigil-palette-blue-normal: #1976d2;
1810
+ --sigil-palette-blue-c600: #1e88e5;
1811
+ --sigil-palette-blue-c500: #2196f3;
1812
+ --sigil-palette-blue-light: #42a5f5;
1813
+ --sigil-palette-blue-c300: #64b5f6;
1814
+ --sigil-palette-blue-extra-light: #90caf9;
1815
+ --sigil-palette-teal-hue: 173;
1816
+ --sigil-palette-teal-c900: #004d40;
1817
+ --sigil-palette-teal-normal: #00796b;
1818
+ --sigil-palette-teal-c600: #00897b;
1819
+ --sigil-palette-teal-c500: #009688;
1820
+ --sigil-palette-teal-light: #26a69a;
1821
+ --sigil-palette-teal-c300: #4db6ac;
1822
+ --sigil-palette-teal-extra-light: #80cbc4;
1823
+ --sigil-palette-red-hue: 359;
1824
+ --sigil-palette-red-c900: #b71c1c;
1825
+ --sigil-palette-red-normal: #d32f2f;
1826
+ --sigil-palette-red-c600: #e53935;
1827
+ --sigil-palette-red-c500: #f44336;
1828
+ --sigil-palette-red-light: #e67575;
1829
+ --sigil-palette-red-c300: #e67575;
1830
+ --sigil-palette-red-extra-light: #ef9a9a;
1831
+ --sigil-palette-yellow-hue: 44;
1832
+ --sigil-palette-yellow-c900: #f57f17;
1833
+ --sigil-palette-yellow-normal: #fbc02d;
1834
+ --sigil-palette-yellow-c600: #fdd835;
1835
+ --sigil-palette-yellow-c500: #ffeb3b;
1836
+ --sigil-palette-yellow-light: #ffee58;
1837
+ --sigil-palette-yellow-c300: #fff176;
1838
+ --sigil-palette-yellow-extra-light: #fff59d;
1839
+ --sigil-palette-yellow-text-override: rgba(0, 0, 0, 0.8);
1840
+ --sigil-palette-yellow-foreground-light-override: #f9a825;
1841
+ --sigil-palette-orange-hue: 24;
1842
+ --sigil-palette-orange-c900: #e65100;
1843
+ --sigil-palette-orange-normal: #f57c00;
1844
+ --sigil-palette-orange-c600: #f57c00;
1845
+ --sigil-palette-orange-c500: #ff9800;
1846
+ --sigil-palette-orange-light: #ffa726;
1847
+ --sigil-palette-orange-c300: #ffb74d;
1848
+ --sigil-palette-orange-extra-light: #ffcc80;
1849
+ --sigil-palette-orange-text-override: rgba(0, 0, 0, 0.8);
1850
+ --sigil-palette-brown-hue: 20;
1851
+ --sigil-palette-brown-c900: #3e2723;
1852
+ --sigil-palette-brown-normal: #5d4037;
1853
+ --sigil-palette-brown-c600: #6d4c41;
1854
+ --sigil-palette-brown-c500: #795548;
1855
+ --sigil-palette-brown-light: #a1887f;
1856
+ --sigil-palette-brown-c300: #bcaaa4;
1857
+ --sigil-palette-brown-extra-light: #d7ccc8;
1858
+ --sigil-palette-brown-foreground-dark-override: #795548;
1859
+ --sigil-palette-green-hue: 123;
1860
+ --sigil-palette-green-c900: #1b5e20;
1861
+ --sigil-palette-green-normal: #388e3c;
1862
+ --sigil-palette-green-c600: #43a047;
1863
+ --sigil-palette-green-c500: #4caf50;
1864
+ --sigil-palette-green-light: #66bb6a;
1865
+ --sigil-palette-green-c300: #81c784;
1866
+ --sigil-palette-green-extra-light: #a5d6a7;
1867
+ --sigil-palette-gray-hue: 0;
1868
+ --sigil-palette-gray-c900: #212121;
1869
+ --sigil-palette-gray-normal: #616161;
1870
+ --sigil-palette-gray-c600: #757575;
1871
+ --sigil-palette-gray-c500: #9e9e9e;
1872
+ --sigil-palette-gray-light: #bdbdbd;
1873
+ --sigil-palette-gray-c300: #e0e0e0;
1874
+ --sigil-palette-gray-extra-light: #eeeeee;
1875
+ --sigil-palette-unknown-hue: var(--sigil-palette-gray-hue);
1876
+ --sigil-palette-unknown-c900: var(--sigil-palette-gray-c900);
1877
+ --sigil-palette-unknown-normal: var(--sigil-palette-gray-normal);
1878
+ --sigil-palette-unknown-c600: var(--sigil-palette-gray-c600);
1879
+ --sigil-palette-unknown-c500: var(--sigil-palette-gray-c500);
1880
+ --sigil-palette-unknown-light: var(--sigil-palette-gray-light);
1881
+ --sigil-palette-unknown-c300: var(--sigil-palette-gray-c300);
1882
+ --sigil-palette-unknown-extra-light: var(--sigil-palette-gray-extra-light);
1883
+ }
1884
+ .arcane-theme-root {
1885
+ --sigil-bg-dark-1: #e9ecef;
1886
+ --sigil-toolbar-spacing-px: 7.5px;
1887
+ --sigil-bg-light-2: #e0e0e0;
1888
+ --sigil-bg-dark: #f8f8f8;
1889
+ --sigil-bg-light: #ffffff;
1890
+ --sigil-bg-button-hover: #e5e5e5;
1891
+ --sigil-border: #e5e5e5;
1892
+ --sigil-border-lighterer: #f6f8fa;
1893
+ --sigil-foreground: #616161;
1894
+ --sigil-foreground-highlight: #1f1f1f;
1895
+ --sigil-foreground-muted: #a0a0a0;
1896
+ --sigil-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 9px;
1897
+ --sigil-shadow-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
1898
+ --sigil-text-shadow: 0 1px rgba(255, 255, 255, 0.7);
1899
+ --sigil-colored-bg-text: rgba(0, 0, 0, 0.6);
1900
+ --sigil-hint-foreground: #ffffff;
1901
+ --sigil-success-foreground: #388e3c;
1902
+ --sigil-error-foreground: #d32f2f;
1903
+ --sigil-warning-foreground: #f57c00;
1904
+ --sigil-ghost-bg: rgba(0, 0, 0, 0.3);
1905
+ --sigil-ghost-border: rgba(0, 0, 0, 0.5);
1906
+ --sigil-color-red: #d73a49;
1907
+ --sigil-color-amber: #b08800;
1908
+ --sigil-usage-hint-text: var(
1909
+ --sigil-palette-blue-text-override,
1910
+ var(--sigil-colored-bg-text)
1911
+ );
1912
+ --sigil-usage-hint-foreground: var(
1913
+ --sigil-palette-blue-foreground-light-override,
1914
+ var(--sigil-palette-blue-c500)
1915
+ );
1916
+ --sigil-usage-hint-background: var(--sigil-palette-blue-light);
1917
+ --sigil-usage-hint-border: var(--sigil-palette-blue-normal);
1918
+ --sigil-usage-hint-drag-border: var(--sigil-palette-blue-c900);
1919
+ --sigil-usage-hint-selected-background: var(--sigil-palette-blue-normal);
1920
+ --sigil-usage-hint-selected-border: var(--sigil-palette-blue-c900);
1921
+ --sigil-usage-hint-selected-text: var(
1922
+ --sigil-palette-blue-text-override,
1923
+ rgba(255, 255, 255, 0.8)
1924
+ );
1925
+ --sigil-usage-hint-dimmed-background: var(--sigil-palette-blue-extra-light);
1926
+ --sigil-usage-hint-dimmed-border: var(--sigil-palette-blue-light);
1927
+ --sigil-usage-hint-gradient-light: var(--sigil-palette-blue-light);
1928
+ --sigil-usage-hint-gradient-dark: var(--sigil-palette-blue-normal);
1929
+ --sigil-usage-purple-text: var(
1930
+ --sigil-palette-purple-text-override,
1931
+ var(--sigil-colored-bg-text)
1932
+ );
1933
+ --sigil-usage-purple-foreground: var(
1934
+ --sigil-palette-purple-foreground-light-override,
1935
+ var(--sigil-palette-purple-c500)
1936
+ );
1937
+ --sigil-usage-purple-background: var(--sigil-palette-purple-light);
1938
+ --sigil-usage-purple-border: var(--sigil-palette-purple-normal);
1939
+ --sigil-usage-purple-drag-border: var(--sigil-palette-purple-c900);
1940
+ --sigil-usage-purple-selected-background: var(--sigil-palette-purple-normal);
1941
+ --sigil-usage-purple-selected-border: var(--sigil-palette-purple-c900);
1942
+ --sigil-usage-purple-selected-text: var(
1943
+ --sigil-palette-purple-text-override,
1944
+ rgba(255, 255, 255, 0.8)
1945
+ );
1946
+ --sigil-usage-purple-dimmed-background: var(
1947
+ --sigil-palette-purple-extra-light
1948
+ );
1949
+ --sigil-usage-purple-dimmed-border: var(--sigil-palette-purple-light);
1950
+ --sigil-usage-purple-gradient-light: #ff1ff4;
1951
+ --sigil-usage-purple-gradient-dark: #6d1fff;
1952
+ --sigil-usage-blue-text: var(
1953
+ --sigil-palette-blue-text-override,
1954
+ var(--sigil-colored-bg-text)
1955
+ );
1956
+ --sigil-usage-blue-foreground: var(
1957
+ --sigil-palette-blue-foreground-light-override,
1958
+ var(--sigil-palette-blue-c500)
1959
+ );
1960
+ --sigil-usage-blue-background: var(--sigil-palette-blue-light);
1961
+ --sigil-usage-blue-border: var(--sigil-palette-blue-normal);
1962
+ --sigil-usage-blue-drag-border: var(--sigil-palette-blue-c900);
1963
+ --sigil-usage-blue-selected-background: var(--sigil-palette-blue-normal);
1964
+ --sigil-usage-blue-selected-border: var(--sigil-palette-blue-c900);
1965
+ --sigil-usage-blue-selected-text: var(
1966
+ --sigil-palette-blue-text-override,
1967
+ rgba(255, 255, 255, 0.8)
1968
+ );
1969
+ --sigil-usage-blue-dimmed-background: var(--sigil-palette-blue-extra-light);
1970
+ --sigil-usage-blue-dimmed-border: var(--sigil-palette-blue-light);
1971
+ --sigil-usage-blue-gradient-light: var(--sigil-palette-blue-light);
1972
+ --sigil-usage-blue-gradient-dark: var(--sigil-palette-blue-normal);
1973
+ --sigil-usage-teal-text: var(
1974
+ --sigil-palette-teal-text-override,
1975
+ var(--sigil-colored-bg-text)
1976
+ );
1977
+ --sigil-usage-teal-foreground: var(
1978
+ --sigil-palette-teal-foreground-light-override,
1979
+ var(--sigil-palette-teal-c500)
1980
+ );
1981
+ --sigil-usage-teal-background: var(--sigil-palette-teal-light);
1982
+ --sigil-usage-teal-border: var(--sigil-palette-teal-normal);
1983
+ --sigil-usage-teal-drag-border: var(--sigil-palette-teal-c900);
1984
+ --sigil-usage-teal-selected-background: var(--sigil-palette-teal-normal);
1985
+ --sigil-usage-teal-selected-border: var(--sigil-palette-teal-c900);
1986
+ --sigil-usage-teal-selected-text: var(
1987
+ --sigil-palette-teal-text-override,
1988
+ rgba(255, 255, 255, 0.8)
1989
+ );
1990
+ --sigil-usage-teal-dimmed-background: var(--sigil-palette-teal-extra-light);
1991
+ --sigil-usage-teal-dimmed-border: var(--sigil-palette-teal-light);
1992
+ --sigil-usage-teal-gradient-light: var(--sigil-palette-teal-light);
1993
+ --sigil-usage-teal-gradient-dark: var(--sigil-palette-teal-normal);
1994
+ --sigil-usage-green-text: var(
1995
+ --sigil-palette-green-text-override,
1996
+ var(--sigil-colored-bg-text)
1997
+ );
1998
+ --sigil-usage-green-foreground: var(
1999
+ --sigil-palette-green-foreground-light-override,
2000
+ var(--sigil-palette-green-c500)
2001
+ );
2002
+ --sigil-usage-green-background: var(--sigil-palette-green-light);
2003
+ --sigil-usage-green-border: var(--sigil-palette-green-normal);
2004
+ --sigil-usage-green-drag-border: var(--sigil-palette-green-c900);
2005
+ --sigil-usage-green-selected-background: var(--sigil-palette-green-normal);
2006
+ --sigil-usage-green-selected-border: var(--sigil-palette-green-c900);
2007
+ --sigil-usage-green-selected-text: var(
2008
+ --sigil-palette-green-text-override,
2009
+ rgba(255, 255, 255, 0.8)
2010
+ );
2011
+ --sigil-usage-green-dimmed-background: var(--sigil-palette-green-extra-light);
2012
+ --sigil-usage-green-dimmed-border: var(--sigil-palette-green-light);
2013
+ --sigil-usage-green-gradient-light: var(--sigil-palette-green-light);
2014
+ --sigil-usage-green-gradient-dark: var(--sigil-palette-green-normal);
2015
+ --sigil-usage-yellow-text: var(
2016
+ --sigil-palette-yellow-text-override,
2017
+ var(--sigil-colored-bg-text)
2018
+ );
2019
+ --sigil-usage-yellow-foreground: var(
2020
+ --sigil-palette-yellow-foreground-light-override,
2021
+ var(--sigil-palette-yellow-c500)
2022
+ );
2023
+ --sigil-usage-yellow-background: var(--sigil-palette-yellow-light);
2024
+ --sigil-usage-yellow-border: var(--sigil-palette-yellow-normal);
2025
+ --sigil-usage-yellow-drag-border: var(--sigil-palette-yellow-c900);
2026
+ --sigil-usage-yellow-selected-background: var(--sigil-palette-yellow-normal);
2027
+ --sigil-usage-yellow-selected-border: var(--sigil-palette-yellow-c900);
2028
+ --sigil-usage-yellow-selected-text: var(
2029
+ --sigil-palette-yellow-text-override,
2030
+ rgba(255, 255, 255, 0.8)
2031
+ );
2032
+ --sigil-usage-yellow-dimmed-background: var(
2033
+ --sigil-palette-yellow-extra-light
2034
+ );
2035
+ --sigil-usage-yellow-dimmed-border: var(--sigil-palette-yellow-light);
2036
+ --sigil-usage-yellow-gradient-light: var(--sigil-palette-yellow-light);
2037
+ --sigil-usage-yellow-gradient-dark: var(--sigil-palette-yellow-normal);
2038
+ --sigil-usage-orange-text: var(
2039
+ --sigil-palette-orange-text-override,
2040
+ var(--sigil-colored-bg-text)
2041
+ );
2042
+ --sigil-usage-orange-foreground: var(
2043
+ --sigil-palette-orange-foreground-light-override,
2044
+ var(--sigil-palette-orange-c500)
2045
+ );
2046
+ --sigil-usage-orange-background: var(--sigil-palette-orange-light);
2047
+ --sigil-usage-orange-border: var(--sigil-palette-orange-normal);
2048
+ --sigil-usage-orange-drag-border: var(--sigil-palette-orange-c900);
2049
+ --sigil-usage-orange-selected-background: var(--sigil-palette-orange-normal);
2050
+ --sigil-usage-orange-selected-border: var(--sigil-palette-orange-c900);
2051
+ --sigil-usage-orange-selected-text: var(
2052
+ --sigil-palette-orange-text-override,
2053
+ rgba(255, 255, 255, 0.8)
2054
+ );
2055
+ --sigil-usage-orange-dimmed-background: var(
2056
+ --sigil-palette-orange-extra-light
2057
+ );
2058
+ --sigil-usage-orange-dimmed-border: var(--sigil-palette-orange-light);
2059
+ --sigil-usage-orange-gradient-light: #ffc029;
2060
+ --sigil-usage-orange-gradient-dark: #cc3900;
2061
+ --sigil-usage-brown-text: var(
2062
+ --sigil-palette-brown-text-override,
2063
+ var(--sigil-colored-bg-text)
2064
+ );
2065
+ --sigil-usage-brown-foreground: var(
2066
+ --sigil-palette-brown-foreground-light-override,
2067
+ var(--sigil-palette-brown-c500)
2068
+ );
2069
+ --sigil-usage-brown-background: var(--sigil-palette-brown-light);
2070
+ --sigil-usage-brown-border: var(--sigil-palette-brown-normal);
2071
+ --sigil-usage-brown-drag-border: var(--sigil-palette-brown-c900);
2072
+ --sigil-usage-brown-selected-background: var(--sigil-palette-brown-normal);
2073
+ --sigil-usage-brown-selected-border: var(--sigil-palette-brown-c900);
2074
+ --sigil-usage-brown-selected-text: var(
2075
+ --sigil-palette-brown-text-override,
2076
+ rgba(255, 255, 255, 0.8)
2077
+ );
2078
+ --sigil-usage-brown-dimmed-background: var(--sigil-palette-brown-extra-light);
2079
+ --sigil-usage-brown-dimmed-border: var(--sigil-palette-brown-light);
2080
+ --sigil-usage-brown-gradient-light: var(--sigil-palette-brown-light);
2081
+ --sigil-usage-brown-gradient-dark: var(--sigil-palette-brown-normal);
2082
+ --sigil-usage-red-text: var(
2083
+ --sigil-palette-red-text-override,
2084
+ var(--sigil-colored-bg-text)
2085
+ );
2086
+ --sigil-usage-red-foreground: var(
2087
+ --sigil-palette-red-foreground-light-override,
2088
+ var(--sigil-palette-red-c500)
2089
+ );
2090
+ --sigil-usage-red-background: var(--sigil-palette-red-light);
2091
+ --sigil-usage-red-border: var(--sigil-palette-red-normal);
2092
+ --sigil-usage-red-drag-border: var(--sigil-palette-red-c900);
2093
+ --sigil-usage-red-selected-background: var(--sigil-palette-red-normal);
2094
+ --sigil-usage-red-selected-border: var(--sigil-palette-red-c900);
2095
+ --sigil-usage-red-selected-text: var(
2096
+ --sigil-palette-red-text-override,
2097
+ rgba(255, 255, 255, 0.8)
2098
+ );
2099
+ --sigil-usage-red-dimmed-background: var(--sigil-palette-red-extra-light);
2100
+ --sigil-usage-red-dimmed-border: var(--sigil-palette-red-light);
2101
+ --sigil-usage-red-gradient-light: var(--sigil-palette-red-light);
2102
+ --sigil-usage-red-gradient-dark: var(--sigil-palette-red-normal);
2103
+ --sigil-usage-gray-text: var(
2104
+ --sigil-palette-gray-text-override,
2105
+ var(--sigil-colored-bg-text)
2106
+ );
2107
+ --sigil-usage-gray-foreground: var(
2108
+ --sigil-palette-gray-foreground-light-override,
2109
+ var(--sigil-palette-gray-c500)
2110
+ );
2111
+ --sigil-usage-gray-background: var(--sigil-palette-gray-light);
2112
+ --sigil-usage-gray-border: var(--sigil-palette-gray-normal);
2113
+ --sigil-usage-gray-drag-border: var(--sigil-palette-gray-c900);
2114
+ --sigil-usage-gray-selected-background: var(--sigil-palette-gray-normal);
2115
+ --sigil-usage-gray-selected-border: var(--sigil-palette-gray-c900);
2116
+ --sigil-usage-gray-selected-text: var(
2117
+ --sigil-palette-gray-text-override,
2118
+ rgba(255, 255, 255, 0.8)
2119
+ );
2120
+ --sigil-usage-gray-dimmed-background: var(--sigil-palette-gray-extra-light);
2121
+ --sigil-usage-gray-dimmed-border: var(--sigil-palette-gray-light);
2122
+ --sigil-usage-gray-gradient-light: var(--sigil-palette-gray-light);
2123
+ --sigil-usage-gray-gradient-dark: var(--sigil-palette-gray-normal);
2124
+ --sigil-usage-unknown-text: var(--sigil-usage-gray-text);
2125
+ --sigil-usage-unknown-foreground: var(--sigil-usage-gray-foreground);
2126
+ --sigil-usage-unknown-background: var(--sigil-usage-gray-background);
2127
+ --sigil-usage-unknown-border: var(--sigil-usage-gray-border);
2128
+ --sigil-usage-unknown-drag-border: var(--sigil-usage-gray-drag-border);
2129
+ --sigil-usage-unknown-selected-background: var(
2130
+ --sigil-usage-gray-selected-background
2131
+ );
2132
+ --sigil-usage-unknown-selected-border: var(
2133
+ --sigil-usage-gray-selected-border
2134
+ );
2135
+ --sigil-usage-unknown-selected-text: var(--sigil-usage-gray-selected-text);
2136
+ --sigil-usage-unknown-dimmed-background: var(
2137
+ --sigil-usage-gray-dimmed-background
2138
+ );
2139
+ --sigil-usage-unknown-dimmed-border: var(--sigil-usage-gray-dimmed-border);
2140
+ --sigil-usage-unknown-gradient-light: var(--sigil-palette-gray-light);
2141
+ --sigil-usage-unknown-gradient-dark: var(--sigil-palette-gray-normal);
2142
+ }
2143
+ .arcane-theme-root.theme-dark {
2144
+ --sigil-bg-dark-1: #252524;
2145
+ --sigil-bg-light-2: #3b3d3f;
2146
+ --sigil-bg-dark: #181818;
2147
+ --sigil-bg-light: #1f1f1f;
2148
+ --sigil-bg-button-hover: #1f1f1f;
2149
+ --sigil-border: #2b2b2b;
2150
+ --sigil-border-lighterer: #6b6b67;
2151
+ --sigil-foreground: #868686;
2152
+ --sigil-foreground-highlight: #d7d7d7;
2153
+ --sigil-foreground-muted: #616161;
2154
+ --sigil-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 9px;
2155
+ --sigil-shadow-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
2156
+ --sigil-text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
2157
+ --sigil-colored-bg-text: rgba(255, 255, 255, 0.8);
2158
+ --sigil-success-foreground: #81c784;
2159
+ --sigil-error-foreground: #e67575;
2160
+ --sigil-warning-foreground: #ffb74d;
2161
+ --sigil-ghost-bg: rgba(255, 255, 255, 0.5);
2162
+ --sigil-ghost-border: #ffffff;
2163
+ --sigil-color-red: #e06c75;
2164
+ --sigil-color-amber: #d19a66;
2165
+ --sigil-usage-hint-text: var(
2166
+ --sigil-palette-blue-text-override,
2167
+ var(--sigil-colored-bg-text)
2168
+ );
2169
+ --sigil-usage-hint-foreground: var(
2170
+ --sigil-palette-blue-foreground-dark-override,
2171
+ var(--sigil-palette-blue-normal)
2172
+ );
2173
+ --sigil-usage-hint-background: var(--sigil-palette-blue-normal);
2174
+ --sigil-usage-hint-border: var(--sigil-palette-blue-light);
2175
+ --sigil-usage-hint-drag-border: var(--sigil-palette-blue-extra-light);
2176
+ --sigil-usage-hint-selected-background: var(--sigil-palette-blue-light);
2177
+ --sigil-usage-hint-selected-border: var(--sigil-palette-blue-extra-light);
2178
+ --sigil-usage-hint-selected-text: var(
2179
+ --sigil-palette-blue-text-override,
2180
+ rgba(0, 0, 0, 0.6)
2181
+ );
2182
+ --sigil-usage-hint-dimmed-background: var(--sigil-palette-blue-c900);
2183
+ --sigil-usage-hint-dimmed-border: var(--sigil-palette-blue-normal);
2184
+ --sigil-usage-purple-text: var(
2185
+ --sigil-palette-purple-text-override,
2186
+ var(--sigil-colored-bg-text)
2187
+ );
2188
+ --sigil-usage-purple-foreground: var(
2189
+ --sigil-palette-purple-foreground-dark-override,
2190
+ var(--sigil-palette-purple-normal)
2191
+ );
2192
+ --sigil-usage-purple-background: var(--sigil-palette-purple-normal);
2193
+ --sigil-usage-purple-border: var(--sigil-palette-purple-light);
2194
+ --sigil-usage-purple-drag-border: var(--sigil-palette-purple-extra-light);
2195
+ --sigil-usage-purple-selected-background: var(--sigil-palette-purple-light);
2196
+ --sigil-usage-purple-selected-border: var(--sigil-palette-purple-extra-light);
2197
+ --sigil-usage-purple-selected-text: var(
2198
+ --sigil-palette-purple-text-override,
2199
+ rgba(0, 0, 0, 0.6)
2200
+ );
2201
+ --sigil-usage-purple-dimmed-background: var(--sigil-palette-purple-c900);
2202
+ --sigil-usage-purple-dimmed-border: var(--sigil-palette-purple-normal);
2203
+ --sigil-usage-blue-text: var(
2204
+ --sigil-palette-blue-text-override,
2205
+ var(--sigil-colored-bg-text)
2206
+ );
2207
+ --sigil-usage-blue-foreground: var(
2208
+ --sigil-palette-blue-foreground-dark-override,
2209
+ var(--sigil-palette-blue-normal)
2210
+ );
2211
+ --sigil-usage-blue-background: var(--sigil-palette-blue-normal);
2212
+ --sigil-usage-blue-border: var(--sigil-palette-blue-light);
2213
+ --sigil-usage-blue-drag-border: var(--sigil-palette-blue-extra-light);
2214
+ --sigil-usage-blue-selected-background: var(--sigil-palette-blue-light);
2215
+ --sigil-usage-blue-selected-border: var(--sigil-palette-blue-extra-light);
2216
+ --sigil-usage-blue-selected-text: var(
2217
+ --sigil-palette-blue-text-override,
2218
+ rgba(0, 0, 0, 0.6)
2219
+ );
2220
+ --sigil-usage-blue-dimmed-background: var(--sigil-palette-blue-c900);
2221
+ --sigil-usage-blue-dimmed-border: var(--sigil-palette-blue-normal);
2222
+ --sigil-usage-teal-text: var(
2223
+ --sigil-palette-teal-text-override,
2224
+ var(--sigil-colored-bg-text)
2225
+ );
2226
+ --sigil-usage-teal-foreground: var(
2227
+ --sigil-palette-teal-foreground-dark-override,
2228
+ var(--sigil-palette-teal-normal)
2229
+ );
2230
+ --sigil-usage-teal-background: var(--sigil-palette-teal-normal);
2231
+ --sigil-usage-teal-border: var(--sigil-palette-teal-light);
2232
+ --sigil-usage-teal-drag-border: var(--sigil-palette-teal-extra-light);
2233
+ --sigil-usage-teal-selected-background: var(--sigil-palette-teal-light);
2234
+ --sigil-usage-teal-selected-border: var(--sigil-palette-teal-extra-light);
2235
+ --sigil-usage-teal-selected-text: var(
2236
+ --sigil-palette-teal-text-override,
2237
+ rgba(0, 0, 0, 0.6)
2238
+ );
2239
+ --sigil-usage-teal-dimmed-background: var(--sigil-palette-teal-c900);
2240
+ --sigil-usage-teal-dimmed-border: var(--sigil-palette-teal-normal);
2241
+ --sigil-usage-green-text: var(
2242
+ --sigil-palette-green-text-override,
2243
+ var(--sigil-colored-bg-text)
2244
+ );
2245
+ --sigil-usage-green-foreground: var(
2246
+ --sigil-palette-green-foreground-dark-override,
2247
+ var(--sigil-palette-green-normal)
2248
+ );
2249
+ --sigil-usage-green-background: var(--sigil-palette-green-normal);
2250
+ --sigil-usage-green-border: var(--sigil-palette-green-light);
2251
+ --sigil-usage-green-drag-border: var(--sigil-palette-green-extra-light);
2252
+ --sigil-usage-green-selected-background: var(--sigil-palette-green-light);
2253
+ --sigil-usage-green-selected-border: var(--sigil-palette-green-extra-light);
2254
+ --sigil-usage-green-selected-text: var(
2255
+ --sigil-palette-green-text-override,
2256
+ rgba(0, 0, 0, 0.6)
2257
+ );
2258
+ --sigil-usage-green-dimmed-background: var(--sigil-palette-green-c900);
2259
+ --sigil-usage-green-dimmed-border: var(--sigil-palette-green-normal);
2260
+ --sigil-usage-yellow-text: var(
2261
+ --sigil-palette-yellow-text-override,
2262
+ var(--sigil-colored-bg-text)
2263
+ );
2264
+ --sigil-usage-yellow-foreground: var(
2265
+ --sigil-palette-yellow-foreground-dark-override,
2266
+ var(--sigil-palette-yellow-normal)
2267
+ );
2268
+ --sigil-usage-yellow-background: var(--sigil-palette-yellow-normal);
2269
+ --sigil-usage-yellow-border: var(--sigil-palette-yellow-light);
2270
+ --sigil-usage-yellow-drag-border: var(--sigil-palette-yellow-extra-light);
2271
+ --sigil-usage-yellow-selected-background: var(--sigil-palette-yellow-light);
2272
+ --sigil-usage-yellow-selected-border: var(--sigil-palette-yellow-extra-light);
2273
+ --sigil-usage-yellow-selected-text: var(
2274
+ --sigil-palette-yellow-text-override,
2275
+ rgba(0, 0, 0, 0.6)
2276
+ );
2277
+ --sigil-usage-yellow-dimmed-background: var(--sigil-palette-yellow-c900);
2278
+ --sigil-usage-yellow-dimmed-border: var(--sigil-palette-yellow-normal);
2279
+ --sigil-usage-yellow-gradient-light: var(--sigil-palette-yellow-normal);
2280
+ --sigil-usage-yellow-gradient-dark: var(--sigil-palette-orange-normal);
2281
+ --sigil-usage-orange-text: var(
2282
+ --sigil-palette-orange-text-override,
2283
+ var(--sigil-colored-bg-text)
2284
+ );
2285
+ --sigil-usage-orange-foreground: var(
2286
+ --sigil-palette-orange-foreground-dark-override,
2287
+ var(--sigil-palette-orange-normal)
2288
+ );
2289
+ --sigil-usage-orange-background: var(--sigil-palette-orange-normal);
2290
+ --sigil-usage-orange-border: var(--sigil-palette-orange-light);
2291
+ --sigil-usage-orange-drag-border: var(--sigil-palette-orange-extra-light);
2292
+ --sigil-usage-orange-selected-background: var(--sigil-palette-orange-light);
2293
+ --sigil-usage-orange-selected-border: var(--sigil-palette-orange-extra-light);
2294
+ --sigil-usage-orange-selected-text: var(
2295
+ --sigil-palette-orange-text-override,
2296
+ rgba(0, 0, 0, 0.6)
2297
+ );
2298
+ --sigil-usage-orange-dimmed-background: var(--sigil-palette-orange-c900);
2299
+ --sigil-usage-orange-dimmed-border: var(--sigil-palette-orange-normal);
2300
+ --sigil-usage-brown-text: var(
2301
+ --sigil-palette-brown-text-override,
2302
+ var(--sigil-colored-bg-text)
2303
+ );
2304
+ --sigil-usage-brown-foreground: var(
2305
+ --sigil-palette-brown-foreground-dark-override,
2306
+ var(--sigil-palette-brown-normal)
2307
+ );
2308
+ --sigil-usage-brown-background: var(--sigil-palette-brown-normal);
2309
+ --sigil-usage-brown-border: var(--sigil-palette-brown-light);
2310
+ --sigil-usage-brown-drag-border: var(--sigil-palette-brown-extra-light);
2311
+ --sigil-usage-brown-selected-background: var(--sigil-palette-brown-light);
2312
+ --sigil-usage-brown-selected-border: var(--sigil-palette-brown-extra-light);
2313
+ --sigil-usage-brown-selected-text: var(
2314
+ --sigil-palette-brown-text-override,
2315
+ rgba(0, 0, 0, 0.6)
2316
+ );
2317
+ --sigil-usage-brown-dimmed-background: var(--sigil-palette-brown-c900);
2318
+ --sigil-usage-brown-dimmed-border: var(--sigil-palette-brown-normal);
2319
+ --sigil-usage-red-text: var(
2320
+ --sigil-palette-red-text-override,
2321
+ var(--sigil-colored-bg-text)
2322
+ );
2323
+ --sigil-usage-red-foreground: var(
2324
+ --sigil-palette-red-foreground-dark-override,
2325
+ var(--sigil-palette-red-normal)
2326
+ );
2327
+ --sigil-usage-red-background: var(--sigil-palette-red-normal);
2328
+ --sigil-usage-red-border: var(--sigil-palette-red-light);
2329
+ --sigil-usage-red-drag-border: var(--sigil-palette-red-extra-light);
2330
+ --sigil-usage-red-selected-background: var(--sigil-palette-red-light);
2331
+ --sigil-usage-red-selected-border: var(--sigil-palette-red-extra-light);
2332
+ --sigil-usage-red-selected-text: var(
2333
+ --sigil-palette-red-text-override,
2334
+ rgba(0, 0, 0, 0.6)
2335
+ );
2336
+ --sigil-usage-red-dimmed-background: var(--sigil-palette-red-c900);
2337
+ --sigil-usage-red-dimmed-border: var(--sigil-palette-red-normal);
2338
+ --sigil-usage-gray-text: var(
2339
+ --sigil-palette-gray-text-override,
2340
+ var(--sigil-colored-bg-text)
2341
+ );
2342
+ --sigil-usage-gray-foreground: var(
2343
+ --sigil-palette-gray-foreground-dark-override,
2344
+ var(--sigil-palette-gray-normal)
2345
+ );
2346
+ --sigil-usage-gray-background: var(--sigil-palette-gray-normal);
2347
+ --sigil-usage-gray-border: var(--sigil-palette-gray-light);
2348
+ --sigil-usage-gray-drag-border: var(--sigil-palette-gray-extra-light);
2349
+ --sigil-usage-gray-selected-background: var(--sigil-palette-gray-light);
2350
+ --sigil-usage-gray-selected-border: var(--sigil-palette-gray-extra-light);
2351
+ --sigil-usage-gray-selected-text: var(
2352
+ --sigil-palette-gray-text-override,
2353
+ rgba(0, 0, 0, 0.6)
2354
+ );
2355
+ --sigil-usage-gray-dimmed-background: var(--sigil-palette-gray-c900);
2356
+ --sigil-usage-gray-dimmed-border: var(--sigil-palette-gray-normal);
2357
+ --sigil-usage-unknown-text: var(--sigil-usage-gray-text);
2358
+ --sigil-usage-unknown-foreground: var(--sigil-usage-gray-foreground);
2359
+ --sigil-usage-unknown-background: var(--sigil-usage-gray-background);
2360
+ --sigil-usage-unknown-border: var(--sigil-usage-gray-border);
2361
+ --sigil-usage-unknown-drag-border: var(--sigil-usage-gray-drag-border);
2362
+ --sigil-usage-unknown-selected-background: var(
2363
+ --sigil-usage-gray-selected-background
2364
+ );
2365
+ --sigil-usage-unknown-selected-border: var(
2366
+ --sigil-usage-gray-selected-border
2367
+ );
2368
+ --sigil-usage-unknown-selected-text: var(--sigil-usage-gray-selected-text);
2369
+ --sigil-usage-unknown-dimmed-background: var(
2370
+ --sigil-usage-gray-dimmed-background
2371
+ );
2372
+ --sigil-usage-unknown-dimmed-border: var(--sigil-usage-gray-dimmed-border);
2373
+ }
2374
+ @media (prefers-color-scheme: dark) {
2375
+ .arcane-theme-root.theme-auto {
2376
+ --sigil-bg-dark-1: #252524;
2377
+ --sigil-bg-light-2: #3b3d3f;
2378
+ --sigil-bg-dark: #181818;
2379
+ --sigil-bg-light: #1f1f1f;
2380
+ --sigil-bg-button-hover: #1f1f1f;
2381
+ --sigil-border: #2b2b2b;
2382
+ --sigil-border-lighterer: #6b6b67;
2383
+ --sigil-foreground: #868686;
2384
+ --sigil-foreground-highlight: #d7d7d7;
2385
+ --sigil-foreground-muted: #616161;
2386
+ --sigil-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 9px;
2387
+ --sigil-shadow-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
2388
+ --sigil-text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
2389
+ --sigil-colored-bg-text: rgba(255, 255, 255, 0.8);
2390
+ --sigil-success-foreground: #81c784;
2391
+ --sigil-error-foreground: #e67575;
2392
+ --sigil-warning-foreground: #ffb74d;
2393
+ --sigil-ghost-bg: rgba(255, 255, 255, 0.5);
2394
+ --sigil-ghost-border: #ffffff;
2395
+ --sigil-color-red: #e06c75;
2396
+ --sigil-color-amber: #d19a66;
2397
+ --sigil-usage-hint-text: var(
2398
+ --sigil-palette-blue-text-override,
2399
+ var(--sigil-colored-bg-text)
2400
+ );
2401
+ --sigil-usage-hint-foreground: var(
2402
+ --sigil-palette-blue-foreground-dark-override,
2403
+ var(--sigil-palette-blue-normal)
2404
+ );
2405
+ --sigil-usage-hint-background: var(--sigil-palette-blue-normal);
2406
+ --sigil-usage-hint-border: var(--sigil-palette-blue-light);
2407
+ --sigil-usage-hint-drag-border: var(--sigil-palette-blue-extra-light);
2408
+ --sigil-usage-hint-selected-background: var(--sigil-palette-blue-light);
2409
+ --sigil-usage-hint-selected-border: var(--sigil-palette-blue-extra-light);
2410
+ --sigil-usage-hint-selected-text: var(
2411
+ --sigil-palette-blue-text-override,
2412
+ rgba(0, 0, 0, 0.6)
2413
+ );
2414
+ --sigil-usage-hint-dimmed-background: var(--sigil-palette-blue-c900);
2415
+ --sigil-usage-hint-dimmed-border: var(--sigil-palette-blue-normal);
2416
+ --sigil-usage-purple-text: var(
2417
+ --sigil-palette-purple-text-override,
2418
+ var(--sigil-colored-bg-text)
2419
+ );
2420
+ --sigil-usage-purple-foreground: var(
2421
+ --sigil-palette-purple-foreground-dark-override,
2422
+ var(--sigil-palette-purple-normal)
2423
+ );
2424
+ --sigil-usage-purple-background: var(--sigil-palette-purple-normal);
2425
+ --sigil-usage-purple-border: var(--sigil-palette-purple-light);
2426
+ --sigil-usage-purple-drag-border: var(--sigil-palette-purple-extra-light);
2427
+ --sigil-usage-purple-selected-background: var(--sigil-palette-purple-light);
2428
+ --sigil-usage-purple-selected-border: var(--sigil-palette-purple-extra-light);
2429
+ --sigil-usage-purple-selected-text: var(
2430
+ --sigil-palette-purple-text-override,
2431
+ rgba(0, 0, 0, 0.6)
2432
+ );
2433
+ --sigil-usage-purple-dimmed-background: var(--sigil-palette-purple-c900);
2434
+ --sigil-usage-purple-dimmed-border: var(--sigil-palette-purple-normal);
2435
+ --sigil-usage-blue-text: var(
2436
+ --sigil-palette-blue-text-override,
2437
+ var(--sigil-colored-bg-text)
2438
+ );
2439
+ --sigil-usage-blue-foreground: var(
2440
+ --sigil-palette-blue-foreground-dark-override,
2441
+ var(--sigil-palette-blue-normal)
2442
+ );
2443
+ --sigil-usage-blue-background: var(--sigil-palette-blue-normal);
2444
+ --sigil-usage-blue-border: var(--sigil-palette-blue-light);
2445
+ --sigil-usage-blue-drag-border: var(--sigil-palette-blue-extra-light);
2446
+ --sigil-usage-blue-selected-background: var(--sigil-palette-blue-light);
2447
+ --sigil-usage-blue-selected-border: var(--sigil-palette-blue-extra-light);
2448
+ --sigil-usage-blue-selected-text: var(
2449
+ --sigil-palette-blue-text-override,
2450
+ rgba(0, 0, 0, 0.6)
2451
+ );
2452
+ --sigil-usage-blue-dimmed-background: var(--sigil-palette-blue-c900);
2453
+ --sigil-usage-blue-dimmed-border: var(--sigil-palette-blue-normal);
2454
+ --sigil-usage-teal-text: var(
2455
+ --sigil-palette-teal-text-override,
2456
+ var(--sigil-colored-bg-text)
2457
+ );
2458
+ --sigil-usage-teal-foreground: var(
2459
+ --sigil-palette-teal-foreground-dark-override,
2460
+ var(--sigil-palette-teal-normal)
2461
+ );
2462
+ --sigil-usage-teal-background: var(--sigil-palette-teal-normal);
2463
+ --sigil-usage-teal-border: var(--sigil-palette-teal-light);
2464
+ --sigil-usage-teal-drag-border: var(--sigil-palette-teal-extra-light);
2465
+ --sigil-usage-teal-selected-background: var(--sigil-palette-teal-light);
2466
+ --sigil-usage-teal-selected-border: var(--sigil-palette-teal-extra-light);
2467
+ --sigil-usage-teal-selected-text: var(
2468
+ --sigil-palette-teal-text-override,
2469
+ rgba(0, 0, 0, 0.6)
2470
+ );
2471
+ --sigil-usage-teal-dimmed-background: var(--sigil-palette-teal-c900);
2472
+ --sigil-usage-teal-dimmed-border: var(--sigil-palette-teal-normal);
2473
+ --sigil-usage-green-text: var(
2474
+ --sigil-palette-green-text-override,
2475
+ var(--sigil-colored-bg-text)
2476
+ );
2477
+ --sigil-usage-green-foreground: var(
2478
+ --sigil-palette-green-foreground-dark-override,
2479
+ var(--sigil-palette-green-normal)
2480
+ );
2481
+ --sigil-usage-green-background: var(--sigil-palette-green-normal);
2482
+ --sigil-usage-green-border: var(--sigil-palette-green-light);
2483
+ --sigil-usage-green-drag-border: var(--sigil-palette-green-extra-light);
2484
+ --sigil-usage-green-selected-background: var(--sigil-palette-green-light);
2485
+ --sigil-usage-green-selected-border: var(--sigil-palette-green-extra-light);
2486
+ --sigil-usage-green-selected-text: var(
2487
+ --sigil-palette-green-text-override,
2488
+ rgba(0, 0, 0, 0.6)
2489
+ );
2490
+ --sigil-usage-green-dimmed-background: var(--sigil-palette-green-c900);
2491
+ --sigil-usage-green-dimmed-border: var(--sigil-palette-green-normal);
2492
+ --sigil-usage-yellow-text: var(
2493
+ --sigil-palette-yellow-text-override,
2494
+ var(--sigil-colored-bg-text)
2495
+ );
2496
+ --sigil-usage-yellow-foreground: var(
2497
+ --sigil-palette-yellow-foreground-dark-override,
2498
+ var(--sigil-palette-yellow-normal)
2499
+ );
2500
+ --sigil-usage-yellow-background: var(--sigil-palette-yellow-normal);
2501
+ --sigil-usage-yellow-border: var(--sigil-palette-yellow-light);
2502
+ --sigil-usage-yellow-drag-border: var(--sigil-palette-yellow-extra-light);
2503
+ --sigil-usage-yellow-selected-background: var(--sigil-palette-yellow-light);
2504
+ --sigil-usage-yellow-selected-border: var(--sigil-palette-yellow-extra-light);
2505
+ --sigil-usage-yellow-selected-text: var(
2506
+ --sigil-palette-yellow-text-override,
2507
+ rgba(0, 0, 0, 0.6)
2508
+ );
2509
+ --sigil-usage-yellow-dimmed-background: var(--sigil-palette-yellow-c900);
2510
+ --sigil-usage-yellow-dimmed-border: var(--sigil-palette-yellow-normal);
2511
+ --sigil-usage-yellow-gradient-light: var(--sigil-palette-yellow-normal);
2512
+ --sigil-usage-yellow-gradient-dark: var(--sigil-palette-orange-normal);
2513
+ --sigil-usage-orange-text: var(
2514
+ --sigil-palette-orange-text-override,
2515
+ var(--sigil-colored-bg-text)
2516
+ );
2517
+ --sigil-usage-orange-foreground: var(
2518
+ --sigil-palette-orange-foreground-dark-override,
2519
+ var(--sigil-palette-orange-normal)
2520
+ );
2521
+ --sigil-usage-orange-background: var(--sigil-palette-orange-normal);
2522
+ --sigil-usage-orange-border: var(--sigil-palette-orange-light);
2523
+ --sigil-usage-orange-drag-border: var(--sigil-palette-orange-extra-light);
2524
+ --sigil-usage-orange-selected-background: var(--sigil-palette-orange-light);
2525
+ --sigil-usage-orange-selected-border: var(--sigil-palette-orange-extra-light);
2526
+ --sigil-usage-orange-selected-text: var(
2527
+ --sigil-palette-orange-text-override,
2528
+ rgba(0, 0, 0, 0.6)
2529
+ );
2530
+ --sigil-usage-orange-dimmed-background: var(--sigil-palette-orange-c900);
2531
+ --sigil-usage-orange-dimmed-border: var(--sigil-palette-orange-normal);
2532
+ --sigil-usage-brown-text: var(
2533
+ --sigil-palette-brown-text-override,
2534
+ var(--sigil-colored-bg-text)
2535
+ );
2536
+ --sigil-usage-brown-foreground: var(
2537
+ --sigil-palette-brown-foreground-dark-override,
2538
+ var(--sigil-palette-brown-normal)
2539
+ );
2540
+ --sigil-usage-brown-background: var(--sigil-palette-brown-normal);
2541
+ --sigil-usage-brown-border: var(--sigil-palette-brown-light);
2542
+ --sigil-usage-brown-drag-border: var(--sigil-palette-brown-extra-light);
2543
+ --sigil-usage-brown-selected-background: var(--sigil-palette-brown-light);
2544
+ --sigil-usage-brown-selected-border: var(--sigil-palette-brown-extra-light);
2545
+ --sigil-usage-brown-selected-text: var(
2546
+ --sigil-palette-brown-text-override,
2547
+ rgba(0, 0, 0, 0.6)
2548
+ );
2549
+ --sigil-usage-brown-dimmed-background: var(--sigil-palette-brown-c900);
2550
+ --sigil-usage-brown-dimmed-border: var(--sigil-palette-brown-normal);
2551
+ --sigil-usage-red-text: var(
2552
+ --sigil-palette-red-text-override,
2553
+ var(--sigil-colored-bg-text)
2554
+ );
2555
+ --sigil-usage-red-foreground: var(
2556
+ --sigil-palette-red-foreground-dark-override,
2557
+ var(--sigil-palette-red-normal)
2558
+ );
2559
+ --sigil-usage-red-background: var(--sigil-palette-red-normal);
2560
+ --sigil-usage-red-border: var(--sigil-palette-red-light);
2561
+ --sigil-usage-red-drag-border: var(--sigil-palette-red-extra-light);
2562
+ --sigil-usage-red-selected-background: var(--sigil-palette-red-light);
2563
+ --sigil-usage-red-selected-border: var(--sigil-palette-red-extra-light);
2564
+ --sigil-usage-red-selected-text: var(
2565
+ --sigil-palette-red-text-override,
2566
+ rgba(0, 0, 0, 0.6)
2567
+ );
2568
+ --sigil-usage-red-dimmed-background: var(--sigil-palette-red-c900);
2569
+ --sigil-usage-red-dimmed-border: var(--sigil-palette-red-normal);
2570
+ --sigil-usage-gray-text: var(
2571
+ --sigil-palette-gray-text-override,
2572
+ var(--sigil-colored-bg-text)
2573
+ );
2574
+ --sigil-usage-gray-foreground: var(
2575
+ --sigil-palette-gray-foreground-dark-override,
2576
+ var(--sigil-palette-gray-normal)
2577
+ );
2578
+ --sigil-usage-gray-background: var(--sigil-palette-gray-normal);
2579
+ --sigil-usage-gray-border: var(--sigil-palette-gray-light);
2580
+ --sigil-usage-gray-drag-border: var(--sigil-palette-gray-extra-light);
2581
+ --sigil-usage-gray-selected-background: var(--sigil-palette-gray-light);
2582
+ --sigil-usage-gray-selected-border: var(--sigil-palette-gray-extra-light);
2583
+ --sigil-usage-gray-selected-text: var(
2584
+ --sigil-palette-gray-text-override,
2585
+ rgba(0, 0, 0, 0.6)
2586
+ );
2587
+ --sigil-usage-gray-dimmed-background: var(--sigil-palette-gray-c900);
2588
+ --sigil-usage-gray-dimmed-border: var(--sigil-palette-gray-normal);
2589
+ --sigil-usage-unknown-text: var(--sigil-usage-gray-text);
2590
+ --sigil-usage-unknown-foreground: var(--sigil-usage-gray-foreground);
2591
+ --sigil-usage-unknown-background: var(--sigil-usage-gray-background);
2592
+ --sigil-usage-unknown-border: var(--sigil-usage-gray-border);
2593
+ --sigil-usage-unknown-drag-border: var(--sigil-usage-gray-drag-border);
2594
+ --sigil-usage-unknown-selected-background: var(
2595
+ --sigil-usage-gray-selected-background
2596
+ );
2597
+ --sigil-usage-unknown-selected-border: var(
2598
+ --sigil-usage-gray-selected-border
2599
+ );
2600
+ --sigil-usage-unknown-selected-text: var(--sigil-usage-gray-selected-text);
2601
+ --sigil-usage-unknown-dimmed-background: var(
2602
+ --sigil-usage-gray-dimmed-background
2603
+ );
2604
+ --sigil-usage-unknown-dimmed-border: var(--sigil-usage-gray-dimmed-border);
2605
+ }
2606
+ }
2607
+ :root {
2608
+ --sigil-control-gap: 1px;
2609
+ --sigil-control-font-size: 0.7rem;
2610
+ }
2611
+ :root {
2612
+ --timecode-min-height: 2rem;
2613
+ --font-mono: 'SF Mono', SF Mono, SF Mono Regular, Consolas, 'Liberation Mono', Menlo,
2614
+ Courier, monospace;
2615
+ }
2616
+ body {
2617
+ overflow: hidden;
2618
+ }
2619
+ .arcane-theme-root {
2620
+ background: var(--arcane-page-bg);
2621
+ --timecode-usage-text: var(--sigil-usage-hint-text);
2622
+ --timecode-usage-foreground: var(--sigil-usage-hint-foreground);
2623
+ --timecode-usage-background: var(--sigil-usage-hint-background);
2624
+ --timecode-usage-border: var(--sigil-usage-hint-border);
2625
+ --timecode-usage-drag-border: var(--sigil-usage-hint-drag-border);
2626
+ --timecode-usage-selected-background: var(
2627
+ --sigil-usage-hint-selected-background
2628
+ );
2629
+ --timecode-usage-selected-border: var(--sigil-usage-hint-selected-border);
2630
+ --timecode-usage-selected-text: var(--sigil-usage-hint-selected-text);
2631
+ --timecode-usage-dimmed-background: var(--sigil-usage-hint-dimmed-background);
2632
+ --timecode-usage-dimmed-border: var(--sigil-usage-hint-dimmed-border);
2633
+ }
2634
+ body {
2635
+ user-select: none;
2636
+ --arcane-page-bg: #1f1f1f;
2637
+ }
2638
+ @layer properties {
2639
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
2640
+ *, ::before, ::after, ::backdrop {
2641
+ --tw-border-style: solid;
2642
+ --tw-leading: initial;
2643
+ --tw-font-weight: initial;
2644
+ --tw-tracking: initial;
2645
+ --tw-shadow: 0 0 #0000;
2646
+ --tw-shadow-color: initial;
2647
+ --tw-shadow-alpha: 100%;
2648
+ --tw-inset-shadow: 0 0 #0000;
2649
+ --tw-inset-shadow-color: initial;
2650
+ --tw-inset-shadow-alpha: 100%;
2651
+ --tw-ring-color: initial;
2652
+ --tw-ring-shadow: 0 0 #0000;
2653
+ --tw-inset-ring-color: initial;
2654
+ --tw-inset-ring-shadow: 0 0 #0000;
2655
+ --tw-ring-inset: initial;
2656
+ --tw-ring-offset-width: 0px;
2657
+ --tw-ring-offset-color: #fff;
2658
+ --tw-ring-offset-shadow: 0 0 #0000;
2659
+ --tw-duration: initial;
2660
+ --tw-text-shadow-color: initial;
2661
+ --tw-text-shadow-alpha: 100%;
2662
+ --tw-content: "";
2663
+ --tw-blur: initial;
2664
+ --tw-brightness: initial;
2665
+ --tw-contrast: initial;
2666
+ --tw-grayscale: initial;
2667
+ --tw-hue-rotate: initial;
2668
+ --tw-invert: initial;
2669
+ --tw-opacity: initial;
2670
+ --tw-saturate: initial;
2671
+ --tw-sepia: initial;
2672
+ --tw-drop-shadow: initial;
2673
+ --tw-drop-shadow-color: initial;
2674
+ --tw-drop-shadow-alpha: 100%;
2675
+ --tw-drop-shadow-size: initial;
2676
+ }
2677
+ }
2678
+ }