camunda-bpmn-js 5.2.0 → 5.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/assets/properties-panel.css +1517 -1509
  2. package/dist/base-modeler.development.js +343 -303
  3. package/dist/base-modeler.production.min.js +3 -3
  4. package/dist/camunda-cloud-modeler.development.js +474 -434
  5. package/dist/camunda-cloud-modeler.production.min.js +3 -3
  6. package/dist/camunda-platform-modeler.development.js +396 -356
  7. package/dist/camunda-platform-modeler.production.min.js +3 -3
  8. package/package.json +4 -4
package/dist/assets/properties-panel.css CHANGED
@@ -1,1509 +1,1517 @@
1
- /**
2
- * Theming
3
- */
4
- .bio-properties-panel,
5
- .djs-parent {
6
- --color-grey-225-10-15: hsl(225, 10%, 15%);
7
- --color-grey-225-10-35: hsl(225, 10%, 35%);
8
- --color-grey-225-10-55: hsl(225, 10%, 55%);
9
- --color-grey-225-10-75: hsl(225, 10%, 75%);
10
- --color-grey-225-10-80: hsl(225, 10%, 80%);
11
- --color-grey-225-10-85: hsl(225, 10%, 85%);
12
- --color-grey-225-10-90: hsl(225, 10%, 90%);
13
- --color-grey-225-10-95: hsl(225, 10%, 95%);
14
- --color-grey-225-10-97: hsl(225, 10%, 97%);
15
- --color-grey-0-0-22: hsl(0, 0%, 22%);
16
-
17
- --color-blue-205-100-35: hsl(205, 100%, 35%);
18
- --color-blue-205-100-45: hsl(205, 100%, 45%);
19
- --color-blue-205-100-50: hsl(205, 100%, 50%);
20
- --color-blue-205-100-85: hsl(205, 100%, 85%);
21
- --color-blue-205-100-95: hsl(205, 100%, 95%);
22
- --color-blue-219-99-53: hsl(219, 99%, 53%);
23
- --color-blue-218-100-74: hsl(218, 100%, 74%);
24
- --color-green-150-86-44: hsl(150, 86%, 44%);
25
-
26
- --color-red-360-100-40: hsl(360, 100%, 40%);
27
- --color-red-360-100-45: hsl(360, 100%, 45%);
28
- --color-red-360-100-92: hsl(360, 100%, 92%);
29
- --color-red-360-100-97: hsl(360, 100%, 97%);
30
- --color-white: white;
31
- --color-black: black;
32
- --color-transparent: transparent;
33
-
34
- }
35
-
36
- .bio-properties-panel {
37
- --text-base-color: var(--color-grey-225-10-15);
38
- --text-error-color: var(--color-red-360-100-45);
39
- --link-color: var(--color-blue-205-100-50);
40
-
41
- --description-color: var(--color-grey-225-10-35);
42
- --description-code-background-color: var(--color-grey-225-10-97);
43
- --description-code-border-color: var(--color-grey-225-10-85);
44
- --description-list-item-color: var(--color-grey-225-10-35);
45
-
46
- --placeholder-color: var(--color-grey-225-10-35);
47
- --placeholder-background-color: var(--color-grey-225-10-95);
48
-
49
- --header-background-color: var(--color-grey-225-10-95);
50
- --header-icon-fill-color: var(--color-grey-225-10-15);
51
- --header-bottom-border-color: var(--color-grey-225-10-75);
52
-
53
- --group-background-color: var(--color-white);
54
- --group-bottom-border-color: var(--color-grey-225-10-75);
55
-
56
- --sticky-group-background-color: var(--color-grey-225-10-95);
57
- --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
58
-
59
- --add-entry-fill-color: var(--color-grey-225-10-35);
60
- --add-entry-hover-fill-color: var(--color-white);
61
- --add-entry-hover-background-color: var(--color-blue-205-100-50);
62
- --add-entry-label-color: var(--color-white);
63
-
64
- --remove-entry-fill-color: var(--color-red-360-100-45);
65
- --remove-entry-hover-background-color: var(--color-red-360-100-92);
66
-
67
- --arrow-fill-color: var(--color-grey-225-10-35);
68
- --arrow-hover-background-color: var(--color-grey-225-10-95);
69
-
70
- --dot-color: var(--color-grey-225-10-35);
71
- --dot-color-error: var(--color-red-360-100-45);
72
-
73
- --list-badge-color: var(--color-white);
74
- --list-badge-background-color: var(--color-grey-225-10-35);
75
-
76
- --input-background-color: var(--color-grey-225-10-97);
77
- --input-border-color: var(--color-grey-225-10-75);
78
-
79
- --input-focus-background-color: var(--color-blue-205-100-95);
80
- --input-focus-border-color: var(--color-blue-205-100-50);
81
-
82
- --input-error-background-color: var(--color-red-360-100-97);
83
- --input-error-border-color: var(--color-red-360-100-45);
84
- --input-error-focus-border-color: var(--color-red-360-100-45);
85
-
86
- --input-disabled-color: var(--color-grey-225-10-55);
87
- --input-disabled-background-color: var(--color-grey-225-10-97);
88
- --input-disabled-border-color: var(--color-grey-225-10-90);
89
-
90
- --toggle-switch-on-background-color: var(--color-blue-205-100-50);
91
- --toggle-switch-off-background-color: var(--color-grey-225-10-75);
92
- --toggle-switch-switcher-background-color: var(--color-white);
93
-
94
- --side-line-background-color: var(--color-grey-225-10-35);
95
- --side-line-extension-background-color: var(--color-grey-225-10-35);
96
-
97
- --list-entry-dot-background-color: var(--color-grey-225-10-35);
98
- --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
99
- --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
100
- --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
101
- --list-entry-add-entry-label-color: var(--color-white);
102
- --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
103
- --list-entry-add-entry-fill-color: var(--color-white);
104
-
105
- --dropdown-item-background-color: var(--color-white);
106
- --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
107
- --dropdown-separator-background-color: var(--color-grey-225-10-75);
108
-
109
- --feel-background-color: transparent;
110
- --feel-active-color: var(--color-blue-205-100-45);
111
- --feel-inactive-color: var(--color-grey-225-10-35);
112
- --feel-hover-color: var(--color-grey-225-10-15);
113
- --feel-hover-background-color: var(--color-grey-225-10-97);
114
- --feel-active-background-color: transparent;
115
- --feel-required-color: var(--color-grey-225-10-55);
116
- --feel-open-popup-color: hsla(0, 0%, 32%, 1);
117
- --feel-open-popup-background-color: var(--color-white);
118
- --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
119
-
120
- --feel-indicator-background-color: var(--color-grey-225-10-90);
121
-
122
- --feelers-select-color: var(--color-blue-205-100-85);
123
-
124
- --text-size-base: 14px;
125
- --text-size-small: 13px;
126
- --text-size-smallest: 12px;
127
- --text-line-height: 21px;
128
- --line-height-condensed: 17px;
129
-
130
- --font-family: sans-serif;
131
- --font-family-monospace: monospace;
132
-
133
- display: flex;
134
- flex-direction: column;
135
- flex: 1;
136
- position: relative;
137
- height: 100%;
138
- width: 100%;
139
- overflow: hidden;
140
- }
141
-
142
- .bio-properties-panel {
143
- color: var(--text-base-color);
144
- }
145
-
146
- .bio-properties-panel * {
147
- font-size: var(--text-size-base);
148
- line-height: var(--text-line-height);
149
- font-weight: 400;
150
- box-sizing: border-box;
151
- }
152
-
153
- .bio-properties-panel {
154
- font-family: var(--font-family);
155
- }
156
-
157
- /**
158
- * Placeholder (empty, multi select, ...)
159
- */
160
- .bio-properties-panel-placeholder {
161
- position: absolute;
162
- display: flex;
163
- flex-direction: column;
164
- justify-content: center;
165
- align-items: center;
166
- top: 0;
167
- right: 0;
168
- bottom: 0;
169
- left: 0;
170
- background-color: var(--placeholder-background-color);
171
- }
172
-
173
- .bio-properties-panel-placeholder-text {
174
- color: var(--placeholder-color);
175
- font-size: var(--text-size-base);
176
- text-align: center;
177
- margin: 12px 48px;
178
- }
179
-
180
- /**
181
- * Header
182
- */
183
- .bio-properties-panel-header {
184
- display: flex;
185
- flex-direction: row;
186
- align-items: center;
187
- font-size: var(--text-size-base);
188
- padding: 16px 10px;
189
- background-color: var(--header-background-color);
190
- border-bottom: 1px solid var(--header-bottom-border-color);
191
- width: 100%;
192
- z-index: 10;
193
- max-height: 64px;
194
- overflow: hidden;
195
- }
196
-
197
- .bio-properties-panel-header-icon {
198
- fill: var(--header-icon-fill-color);
199
- display: flex;
200
- flex-direction: row;
201
- align-items: center;
202
- justify-content: center;
203
- width: 32px;
204
- height: 32px;
205
- }
206
-
207
- .bio-properties-panel-header-labels {
208
- overflow: hidden;
209
- margin-left: 12px;
210
- user-select: none;
211
- }
212
-
213
- .bio-properties-panel-header-type {
214
- font-size: var(--text-size-smallest);
215
- font-weight: 600;
216
- white-space: nowrap;
217
- text-overflow: ellipsis;
218
- overflow: hidden;
219
- text-transform: uppercase;
220
- }
221
-
222
- .bio-properties-panel-header-label {
223
- white-space: nowrap;
224
- text-overflow: ellipsis;
225
- overflow: hidden;
226
- margin-top: -6px;
227
- }
228
-
229
- .bio-properties-panel-header-actions {
230
- margin-left: auto;
231
- margin-top: auto;
232
- }
233
-
234
- /**
235
- * Scroll container
236
- */
237
- .bio-properties-panel-scroll-container {
238
- overflow-y: auto;
239
- overflow-x: hidden;
240
- flex: 1;
241
- }
242
-
243
- /**
244
- * Groups
245
- */
246
- .bio-properties-panel-group {
247
- background-color: var(--group-background-color);
248
- border-bottom: 1px solid var(--group-bottom-border-color);
249
- position: relative;
250
- }
251
-
252
- .bio-properties-panel-group-header {
253
- display: flex;
254
- flex-direction: row;
255
- align-items: center;
256
- font-size: var(--text-size-base);
257
- height: 32px;
258
- user-select: none;
259
- justify-content: space-between;
260
- margin-bottom: -1px; /* avoid double borders */
261
- position: relative; /* browsers not supporting sticky */
262
- position: -webkit-sticky; /* for safari */
263
- position: sticky;
264
- top: 0;
265
- z-index: 10;
266
- }
267
-
268
- .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
269
- white-space: nowrap;
270
- overflow: hidden;
271
- text-overflow: ellipsis;
272
- margin: 1px 12px 0;
273
- }
274
-
275
- .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
276
- font-weight: 500;
277
- }
278
-
279
- .bio-properties-panel-group-header.sticky {
280
- background-color: var(--sticky-group-background-color);
281
- border-bottom: 1px solid var(--sticky-group-bottom-border-color);
282
- }
283
-
284
- .bio-properties-panel-group-header-buttons {
285
- display: flex;
286
- }
287
-
288
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
289
- display: inline-flex;
290
- justify-content: center;
291
- align-items: center;
292
- align-self: center;
293
- height: 22px;
294
- line-height: 22px;
295
- min-width: 22px;
296
- margin: 5px;
297
- padding: 0 3px;
298
- border: none;
299
- background: none;
300
- }
301
-
302
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
303
- margin-right: 0;
304
- }
305
-
306
- .bio-properties-panel-add-entry {
307
- fill: var(--add-entry-fill-color);
308
- border-radius: 11px;
309
- }
310
-
311
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
312
- margin-right: 69px;
313
- }
314
-
315
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
316
- margin-right: 19px;
317
- }
318
-
319
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
320
- display: none;
321
- color: var(--add-entry-label-color);
322
- padding: 0 6px 0 2px;
323
- }
324
-
325
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
326
- background-color: var(--add-entry-hover-background-color);
327
- fill: var(--add-entry-hover-fill-color);
328
- }
329
-
330
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
331
- display: block;
332
- }
333
-
334
- .bio-properties-panel-group-entries {
335
- display: none;
336
- }
337
-
338
- .bio-properties-panel-group-entries.open {
339
- display: block;
340
- }
341
-
342
- .bio-properties-panel-arrow {
343
- display: flex;
344
- justify-content: center;
345
- text-align: center;
346
- fill: var(--arrow-fill-color);
347
- min-width: 22px;
348
- border-radius: 11px;
349
- border: none;
350
- background: none;
351
- }
352
-
353
- .bio-properties-panel-arrow:hover {
354
- background-color: var(--arrow-hover-background-color);
355
- }
356
-
357
- .bio-properties-panel-arrow-down {
358
- transform: rotate(90deg);
359
- }
360
-
361
- .bio-properties-panel-dot {
362
- align-self: center;
363
- height: 8px;
364
- min-width: 8px;
365
- border-radius: 50%;
366
- margin: 12px;
367
- background-color: var(--dot-color);
368
- }
369
-
370
- .bio-properties-panel-dot--error {
371
- --dot-color: var(--dot-color-error);
372
- }
373
-
374
- /**
375
- * Lists
376
- */
377
- .bio-properties-panel-list {
378
- display: none;
379
- }
380
-
381
- .bio-properties-panel-list.open {
382
- display: block;
383
- margin-bottom: 6px;
384
- padding-bottom: 2px;
385
- }
386
-
387
- .bio-properties-panel-list-badge {
388
- height: 22px;
389
- min-width: 22px;
390
- color: var(--list-badge-color);
391
- border-radius: 11px;
392
- font-size: var(--text-size-small);
393
- line-height: 22px;
394
- text-align: center;
395
- user-select: none;
396
- padding: 0 5px;
397
- margin: 5px;
398
- background-color: var(--list-badge-background-color);
399
- }
400
-
401
- .bio-properties-panel-list-badge--error {
402
- --list-badge-background-color: var(--dot-color-error);
403
- }
404
-
405
- /**
406
- * Basic entries
407
- */
408
- .bio-properties-panel-entry {
409
- margin: 2px 32px 6px 12px;
410
- }
411
-
412
- .bio-properties-panel-entry:last-child {
413
- padding-bottom: 10px;
414
- }
415
-
416
- .bio-properties-panel-label {
417
- display: block;
418
- font-size: var(--text-size-small);
419
- margin: 2px 0 1px;
420
- }
421
-
422
- .bio-properties-panel-description,
423
- .bio-properties-panel-description p,
424
- .bio-properties-panel-description span,
425
- .bio-properties-panel-description div {
426
- color: var(--description-color);
427
- display: block;
428
- margin: 2px 0 4px;
429
- line-height: var(--line-height-condensed);
430
- font-weight: 400;
431
- font-size: var(--text-size-small);
432
- }
433
-
434
- .bio-properties-panel-description code {
435
- color: var(--description-color);
436
- font-family: var(--font-family);
437
- font-size: var(--text-size-small);
438
- line-height: var(--line-height-condensed);
439
- padding: 0 2px;
440
- background-color: var(--description-code-background-color);
441
- border: 1px solid var(--description-code-border-color);
442
- border-radius: 3px;
443
- }
444
-
445
- .bio-properties-panel-description pre code {
446
- width: 100%;
447
- display: block;
448
- overflow-x: auto;
449
- padding: 4px 6px;
450
- font-family: var(--font-family-monospace);
451
- }
452
-
453
- .bio-properties-panel-description ul {
454
- padding: 0;
455
- margin: 0 0 0 12px;
456
- list-style-type: disc;
457
- }
458
-
459
- .bio-properties-panel-description li {
460
- color: var(--description-list-item-color);
461
- margin: 0 0 0 12px;
462
- }
463
-
464
- .bio-properties-panel-description a {
465
- color: var(--link-color);
466
- font-size: var(--text-size-small);
467
- text-decoration: underline;
468
- }
469
-
470
- .bio-properties-panel-feelers-editor.bio-properties-panel-input {
471
- padding: 0;
472
- }
473
-
474
- .bio-properties-panel-feelers-input .cm-editor
475
- {
476
- min-height: 32px;
477
- max-height: 215px;
478
- background-color: transparent;
479
- }
480
-
481
- .bio-properties-panel-feelers-editor .cm-editor.cm-focused,
482
- .bio-properties-panel-feelers-input .cm-editor.cm-focused {
483
- outline: none;
484
- }
485
-
486
- .bio-properties-panel-input {
487
- padding: 3px 6px 2px;
488
- border: 1px solid var(--input-border-color);
489
- border-radius: 2px;
490
- background-color: var(--input-background-color);
491
- font-size: var(--text-size-base);
492
- font-family: inherit;
493
- }
494
-
495
- .bio-properties-panel-input[type=number],
496
- select.bio-properties-panel-input,
497
- textarea.bio-properties-panel-input,
498
- .bio-properties-panel-input[type=text] {
499
- display: block;
500
- width: 100%;
501
- }
502
-
503
- textarea.bio-properties-panel-input {
504
- min-height: 28px;
505
- }
506
-
507
- .bio-properties-panel-input:focus,
508
- .bio-properties-panel-input:focus-within {
509
- outline: none;
510
- background-color: var(--input-focus-background-color);
511
- border: 1px solid var(--input-focus-border-color);
512
- }
513
-
514
- .bio-properties-panel-textfield:focus-within,
515
- .bio-properties-panel-feel-entry:focus-within {
516
- --input-background-color: var(--input-focus-background-color);
517
- --input-border-color: var(--input-focus-border-color);
518
- }
519
-
520
- .bio-properties-panel-input:disabled {
521
- border-color: var(--input-disabled-border-color);
522
- background-color: var(--input-disabled-background-color);
523
- color: var(--input-disabled-color);
524
- }
525
-
526
- select.bio-properties-panel-input {
527
- padding: 4px 6px;
528
- }
529
-
530
- .bio-properties-panel-input-monospace {
531
- font-family: var(--font-family-monospace);
532
- }
533
-
534
- .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
535
- margin: 0;
536
- vertical-align: middle;
537
- }
538
-
539
- .bio-properties-panel-input[type="checkbox"]:focus {
540
- outline: 2px solid var(--input-focus-border-color);
541
- outline-offset: 0;
542
- }
543
-
544
- .bio-properties-panel-checkbox > .bio-properties-panel-label {
545
- display: inline-block;
546
- font-size: var(--text-size-base);
547
- margin-left: 6px;
548
- margin-top: auto;
549
- vertical-align: middle;
550
- }
551
-
552
- .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
553
- margin-top: -8px;
554
- }
555
-
556
- .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
557
- margin-left: 18px;
558
- }
559
-
560
- textarea.bio-properties-panel-input {
561
- resize: vertical;
562
- }
563
-
564
- .bio-properties-panel-entry.has-error .bio-properties-panel-input,
565
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
566
- border-color: var(--input-error-border-color);
567
- background-color: var(--input-error-background-color);
568
- }
569
-
570
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
571
- border-color: var(--input-error-border-color);
572
- }
573
-
574
- .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
575
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
576
- border-color: var(--input-error-focus-border-color);
577
- }
578
-
579
- .bio-properties-panel-entry .bio-properties-panel-error {
580
- color: var(--text-error-color);
581
- margin: 4px 0;
582
- font-size: var(--text-size-small);
583
- }
584
-
585
- .bio-properties-panel-simple {
586
- width: 100%;
587
- margin-right: 8px;
588
- }
589
-
590
- .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
591
- margin: auto;
592
- }
593
-
594
- /**
595
- * Toggle Switch
596
- */
597
- .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
598
- margin-top: -8px;
599
- }
600
-
601
- .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
602
- margin-left: 38px;
603
- }
604
-
605
- .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
606
- display: flex;
607
- flex-direction: row;
608
- align-items: center;
609
- }
610
-
611
- .bio-properties-panel-toggle-switch.inline {
612
- display: flex;
613
- flex-direction: row;
614
- }
615
-
616
- .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
617
- margin-left: auto;
618
- }
619
-
620
- .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
621
- font-size: var(--text-size-base);
622
- }
623
-
624
- .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
625
- font-size: var(--text-size-small);
626
- }
627
-
628
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
629
- margin: 0;
630
- margin-left: 6px;
631
- font-size: var(--text-size-base);
632
- }
633
-
634
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
635
- position: relative;
636
- width: 32px;
637
- height: 16px;
638
- }
639
-
640
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
641
- outline: 2px solid var(--input-focus-border-color);
642
- outline-offset: 1px;
643
- }
644
-
645
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
646
- opacity: 0;
647
- width: 0;
648
- height: 0;
649
- }
650
-
651
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
652
- position: absolute;
653
- cursor: pointer;
654
- top: 0;
655
- left: 0;
656
- right: 0;
657
- bottom: 0;
658
- background-color: var(--toggle-switch-off-background-color);
659
- -webkit-transition: 0.4s;
660
- transition: 0.4s;
661
- border-radius: 34px;
662
- }
663
-
664
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
665
- position: absolute;
666
- content: "";
667
- height: 12px;
668
- width: 12px;
669
- left: 2px;
670
- bottom: 2px;
671
- background-color: var(--toggle-switch-switcher-background-color);
672
- -webkit-transition: 0.4s;
673
- transition: 0.4s;
674
- border-radius: 50%;
675
- }
676
-
677
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
678
- background-color: var(--toggle-switch-on-background-color);
679
- box-shadow: 0 0 1px ;
680
- }
681
-
682
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
683
- -webkit-transform: translateX(16px);
684
- -ms-transform: translateX(16px);
685
- transform: translateX(16px);
686
- }
687
-
688
- /**
689
- * Collapsible entries
690
- */
691
- .bio-properties-panel-collapsible-entry-entries {
692
- position: relative;
693
- display: none;
694
- }
695
-
696
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
697
- padding-bottom: 0;
698
- }
699
-
700
- .bio-properties-panel-collapsible-entry-entries.open {
701
- display: block;
702
- }
703
-
704
- .bio-properties-panel-collapsible-entry-entries {
705
- padding-left: 20px;
706
- margin-bottom: 10px;
707
- position: relative;
708
- display: none;
709
- }
710
-
711
- .bio-properties-panel-collapsible-entry-header {
712
- position: relative;
713
- display: flex;
714
- justify-content: space-between;
715
- align-items: center;
716
- overflow: hidden;
717
- }
718
-
719
- .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
720
- padding: 2px 24px 2px 32px;
721
- font-size: var(--text-size-base);
722
- white-space: nowrap;
723
- overflow: hidden;
724
- text-overflow: ellipsis;
725
- user-select: none;
726
- }
727
-
728
- .bio-properties-panel-collapsible-entry-arrow {
729
- position: absolute;
730
- top: 2px;
731
- left: 6px;
732
- padding: 0 3px;
733
- height: 22px;
734
- display: inline-flex;
735
- justify-content: center;
736
- align-items: center;
737
- align-self: center;
738
- }
739
-
740
- .bio-properties-panel-remove-entry {
741
- display: flex;
742
- align-items: center;
743
- justify-content: center;
744
- margin-right: 5px;
745
- padding: 0;
746
- width: 22px;
747
- height: 22px;
748
- fill: var(--remove-entry-fill-color);
749
- border-radius: 50%;
750
- border: none;
751
- background: none;
752
- visibility: hidden;
753
- }
754
-
755
- .bio-properties-panel-remove-entry:hover {
756
- background-color: var(--remove-entry-hover-background-color);
757
- }
758
-
759
- .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
760
- .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
761
- .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
762
- {
763
- visibility: visible;
764
- }
765
-
766
- /* Side line */
767
- .bio-properties-panel-collapsible-entry-entries::before {
768
- content: "";
769
- position: absolute;
770
- left: 16px;
771
- width: 2px;
772
- top: -6px;
773
- bottom: 12px;
774
- background-color: var(--side-line-background-color);
775
- border-radius: 1px;
776
- }
777
-
778
- /* Side line extension for non-list entry or open list entry positioned as the last one. */
779
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
780
- .bio-properties-panel-list-entry.open:last-child {
781
- position: relative;
782
- }
783
-
784
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
785
- .bio-properties-panel-list-entry.open:last-child::after {
786
- content: "";
787
- position: absolute;
788
- left: -16px;
789
- width: 2px;
790
- top: 0;
791
- bottom: -4px;
792
- background-color: var(--side-line-extension-background-color);
793
- border-radius: 1px;
794
- }
795
-
796
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
797
- left: -18px;
798
- }
799
-
800
- /*
801
- * List entry
802
- */
803
- .bio-properties-panel-list-entry {
804
- position: relative;
805
- margin-right: 5px;
806
- margin-bottom: 0;
807
- }
808
-
809
- .bio-properties-panel-list-entry .bio-properties-panel-entry {
810
- margin-right: 0;
811
- }
812
-
813
- .bio-properties-panel-list-entry-header {
814
- position: relative;
815
- overflow: hidden;
816
- display: flex;
817
- justify-content: space-between;
818
- height: 32px;
819
- }
820
-
821
- /* Nested list dot */
822
- .bio-properties-panel-list-entry::before {
823
- content: "";
824
- width: 8px;
825
- height: 8px;
826
- position: absolute;
827
- left: -19px;
828
- top: 13px;
829
- border-radius: 50%;
830
- background-color: var(--list-entry-dot-background-color);
831
- }
832
-
833
- .bio-properties-panel-list-entry-header-title {
834
- display: block;
835
- margin: auto 0;
836
- padding: 2px 0;
837
- font-size: var(--text-size-base);
838
- white-space: nowrap;
839
- overflow: hidden;
840
- text-overflow: ellipsis;
841
- }
842
-
843
- .bio-properties-panel-list-entry-header-title.open {
844
- font-weight: 500;
845
- }
846
-
847
- .bio-properties-panel-list-entry-header-buttons {
848
- display: flex;
849
- align-items: center;
850
- }
851
-
852
- .bio-properties-panel-list-entry-header-buttons > button {
853
- display: inline-flex;
854
- justify-content: center;
855
- align-items: center;
856
- align-self: center;
857
- height: 22px;
858
- line-height: 22px;
859
- min-width: 22px;
860
- margin: 5px;
861
- padding: 0 3px;
862
- border: none;
863
- background: none;
864
- fill: var(--list-entry-header-button-fill-color);
865
- }
866
-
867
- .bio-properties-panel-list-entry-header-buttons > :last-child {
868
- margin-right: 0;
869
- }
870
-
871
- .bio-properties-panel-list-entry-items {
872
- padding: 0;
873
- margin: 0;
874
-
875
- list-style: none;
876
- }
877
-
878
- .bio-properties-panel-list-entry-items:not(.open) {
879
- display: none;
880
- }
881
-
882
- .bio-properties-panel-list-entry-item {
883
- display: flex;
884
- justify-content: space-between;
885
- }
886
-
887
- .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
888
- margin-right: 1px;
889
- }
890
-
891
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
892
- width: 100%;
893
- margin-right: 4px;
894
- }
895
-
896
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
897
- margin-left: -8px;
898
- }
899
-
900
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
901
- left: 2px;
902
- }
903
-
904
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
905
- padding-left: 30px;
906
- }
907
-
908
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
909
- padding-left: 10px;
910
- }
911
-
912
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
913
- left: 4px;
914
- }
915
-
916
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
917
- margin-right: 16px;
918
- padding-left: 6px;
919
- }
920
-
921
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
922
- color: var(--list-entry-add-entry-label-color);
923
- padding: 4px 6px 3px 2px;
924
- }
925
-
926
- .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
927
- background-color: var(--list-entry-add-entry-background-color);
928
- fill: var(--list-entry-add-entry-fill-color);
929
- }
930
-
931
- .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
932
- border-radius: 0;
933
- margin-bottom: -2px;
934
- }
935
-
936
- .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
937
- border-top-left-radius: 2px;
938
- border-top-right-radius: 2px;
939
- }
940
-
941
- .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
942
- border-bottom-left-radius: 2px;
943
- border-bottom-right-radius: 2px;
944
- }
945
-
946
- .bio-properties-panel-dropdown-button {
947
- position: relative;
948
-
949
- --dropdown-button-margin: 5px;
950
- }
951
-
952
- .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
953
- display: none;
954
- }
955
-
956
- .bio-properties-panel-dropdown-button__menu {
957
- min-width: calc(100% - var(--dropdown-button-margin) * 2);
958
- max-width: 240px;
959
-
960
- position: absolute;
961
- top: calc(100% - var(--dropdown-button-margin));
962
- right: var(--dropdown-button-margin);
963
- z-index: 101;
964
-
965
- background-color: var(--dropdown-item-background-color);
966
-
967
- padding: 8px 0;
968
-
969
- box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
970
- }
971
-
972
- .bio-properties-panel-dropdown-button__menu-item {
973
- display: block;
974
- width: 100%;
975
- padding: 4px 12px;
976
-
977
- font-size: var(--text-size-small);
978
- appearance: revert;
979
- border: unset;
980
- background: unset;
981
- text-align: unset;
982
- }
983
-
984
- .bio-properties-panel-dropdown-button__menu-item--separator {
985
- width: 100%;
986
- height: 1px;
987
-
988
- padding: 0;
989
- margin: 8px 0;
990
-
991
- background-color: var(--dropdown-separator-background-color);
992
- }
993
-
994
- .bio-properties-panel-dropdown-button__menu-item--actionable {
995
- font-size: var(--text-size-base);
996
- }
997
-
998
- .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
999
- background-color: var(--dropdown-item-hover-background-color);
1000
- }
1001
-
1002
- .bio-properties-panel-feel-input {
1003
- position: relative;
1004
- }
1005
-
1006
- .bio-properties-panel-feel-input input {
1007
- padding-right: 2em
1008
- }
1009
-
1010
- .bio-properties-panel-feel-entry .bio-properties-panel-label {
1011
- display: flex;
1012
- }
1013
-
1014
- .bio-properties-panel-feel-icon {
1015
- display: inline-flex;
1016
- height: 18px;
1017
- width: 22px;
1018
- vertical-align: text-bottom;
1019
- padding: 0;
1020
- margin: 0 3px;
1021
- align-items: center;
1022
- align-self: center;
1023
- justify-content: center;
1024
- border: none;
1025
- background: none;
1026
- border-radius: 3px;
1027
- }
1028
-
1029
- .bio-properties-panel-feel-icon.optional {
1030
- cursor: pointer;
1031
- background: var(--feel-background-color);
1032
- }
1033
-
1034
- .bio-properties-panel-feel-icon svg * {
1035
- fill: var(--feel-inactive-color);
1036
- }
1037
-
1038
- .bio-properties-panel-feel-icon:hover {
1039
- background: var(--feel-hover-background-color);
1040
- }
1041
-
1042
- .bio-properties-panel-feel-icon:hover svg * {
1043
- fill: var(--feel-hover-color);
1044
- }
1045
-
1046
- .bio-properties-panel-feel-icon.active {
1047
- background: var(--feel-active-background-color);
1048
- }
1049
-
1050
- .bio-properties-panel-feel-icon.active:hover {
1051
- background: var(--feel-hover-background-color);
1052
- }
1053
-
1054
- .bio-properties-panel-feel-icon.required.active {
1055
- background: none;
1056
- }
1057
-
1058
- .bio-properties-panel-feel-icon.active svg * {
1059
- fill: var(--feel-active-color);
1060
- }
1061
-
1062
- .bio-properties-panel-feel-icon.required.active svg * {
1063
- fill: var(--feel-required-color);
1064
- }
1065
-
1066
- .bio-properties-panel-feel-editor-container {
1067
- position: relative;
1068
- }
1069
-
1070
- .bio-properties-panel-feel-editor-container.active {
1071
- font-family: var(--font-family-monospace);
1072
- }
1073
-
1074
- .bio-properties-panel-feel-container {
1075
- position: relative;
1076
- }
1077
-
1078
- .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1079
- position: static;
1080
- padding-left: 2.4em !important;
1081
- min-height: 28px;
1082
- }
1083
-
1084
- .bio-properties-panel-feel-indicator {
1085
- position: absolute;
1086
- border: 1px solid var(--input-border-color);
1087
- background-color: var(--feel-indicator-background-color);
1088
- border-right: 0px;
1089
- border-radius: 2px 0 0 2px;
1090
- z-index: 1;
1091
- height: 100%;
1092
- width: 2em;
1093
- text-align: center;
1094
- padding: 2px 6px;
1095
- }
1096
-
1097
- .bio-properties-panel-feel-editor-container .cm-scroller {
1098
- overflow: hidden !important;
1099
- }
1100
-
1101
- .bio-properties-panel-feelers-editor .cm-editor {
1102
- background-color: transparent;
1103
- }
1104
-
1105
-
1106
- /* @Note(pinussilvestrus): mitigate low contrast - https://github.com/bpmn-io/cm-theme/issues/4 */
1107
- .bio-properties-panel-feelers-editor .cm-content ::selection {
1108
- background: var(--feelers-select-color, hsl(205, 100%, 85%));
1109
- }
1110
-
1111
- .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1112
- background-color: transparent;
1113
- }
1114
-
1115
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1116
- resize: none;
1117
- overflow: hidden;
1118
- overflow-y: auto;
1119
- }
1120
-
1121
- .bio-properties-panel-feel-editor-container,
1122
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1123
- .bio-properties-panel-feel-container .cm-editor {
1124
- min-height: 100%;
1125
- }
1126
-
1127
- .bio-properties-panel-feel-checkbox,
1128
- .bio-properties-panel-feel-toggle-switch {
1129
- padding-top: 1px;
1130
- }
1131
-
1132
- .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1133
- .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1134
- display: flex;
1135
- flex-direction: row;
1136
- align-items: center;
1137
- }
1138
-
1139
- .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1140
- .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1141
- margin-left: auto;
1142
- }
1143
-
1144
- .bio-properties-panel-tooltip-wrapper {
1145
- text-decoration: underline;
1146
- text-decoration-style: dotted;
1147
- text-underline-offset: 2px;
1148
- font: inherit;
1149
- display: flex;
1150
- justify-content: center;
1151
- width: fit-content;
1152
- }
1153
-
1154
- .bio-properties-panel-tooltip {
1155
- --tooltip-underline-color: var(--color-blue-219-99-53);
1156
- --tooltip-background-color: var(--color-grey-0-0-22);
1157
- --tooltip-link: var(--color-blue-218-100-74);
1158
- --tooltip-code-background-color: var(--color-grey-225-10-97);
1159
- --tooltip-code-border-color: var(--color-grey-225-10-85);
1160
-
1161
- display: flex;
1162
- color: var(--color-white, white);
1163
- position: fixed;
1164
- z-index: 1000;
1165
- max-width: 300px;
1166
- font-size: var(--text-size-small);
1167
- font-family: var(--font-family);
1168
- }
1169
-
1170
- .bio-properties-panel-tooltip.right {
1171
- padding-right: 6px;
1172
- }
1173
-
1174
- .bio-properties-panel-tooltip.top {
1175
- flex-direction: column;
1176
- }
1177
-
1178
- .bio-properties-panel-tooltip-content {
1179
- background-color: var(--tooltip-background-color);
1180
- padding: 16px;
1181
- border-radius: 2px;
1182
- font-weight: 400;
1183
- white-space: pre-wrap;
1184
- }
1185
-
1186
- .bio-properties-panel-tooltip-content h1 {
1187
- font-size: var(--text-size-base);
1188
- font-weight: bold;
1189
- margin: 0;
1190
- }
1191
-
1192
- .bio-properties-panel-tooltip-content code,
1193
- .bio-properties-panel-tooltip-content pre {
1194
- color: var(--description-color);
1195
- font-family: var(--font-family);
1196
- font-size: var(--text-size-small);
1197
- line-height: var(--line-height-condensed);
1198
- padding: 0 2px;
1199
- background-color: var(--tooltip-code-background-color);
1200
- border: 1px solid var(--tooltip-code-border-color);
1201
- border-radius: 3px;
1202
- }
1203
-
1204
- .bio-properties-panel-tooltip-content pre code {
1205
- border: none;
1206
- }
1207
-
1208
- .bio-properties-panel-tooltip p:first-child {
1209
- margin-top: 0;
1210
- }
1211
-
1212
- .bio-properties-panel-tooltip p:last-child {
1213
- margin-bottom: 0;
1214
- }
1215
-
1216
- .bio-properties-panel-tooltip-content a {
1217
- color: var(--tooltip-link);
1218
- }
1219
-
1220
- .bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
1221
- width: 0;
1222
- height: 0;
1223
- border-top: 5px solid transparent;
1224
- border-bottom: 5px solid transparent;
1225
- border-left: 5px solid var(--tooltip-background-color);
1226
- margin-top: 16px;
1227
- }
1228
-
1229
- .bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
1230
- margin-top: -3px;
1231
- margin-left: calc(50% - 2.5px);
1232
- transform: rotate(90deg);
1233
- }
1234
-
1235
- .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
1236
- .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
1237
- display: none;
1238
- justify-content: center;
1239
- flex-direction: column;
1240
- color: hsla(0, 0%, 9%, 0.25);
1241
- padding: 3px 6px 2px;
1242
- border: 1px solid var(--input-border-color);
1243
- border-radius: 2px;
1244
- background-color: var(--input-background-color);
1245
- font-size: var(--text-size-base);
1246
- font-family: inherit;
1247
- width: 100%;
1248
- min-height: 100%;
1249
- }
1250
-
1251
- .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-input,
1252
- .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
1253
- display: none;
1254
- }
1255
-
1256
- .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
1257
- .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
1258
- display: flex;
1259
- }
1260
-
1261
- .bio-properties-panel-popup {
1262
- --popup-background-color: hsla(0, 0%, 96%, 1);
1263
- --popup-header-background-color: white;
1264
- --popup-font-color: hsla(0, 0%, 0%, 1);
1265
- --popup-title-color: hsla(0, 0%, 0%, 1);
1266
-
1267
- --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
1268
- --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
1269
-
1270
- position: fixed;
1271
- display: flex;
1272
- flex: auto;
1273
- flex-direction: column;
1274
- font-family: IBM Plex Sans, sans-serif;
1275
- padding: 0;
1276
- z-index: 1001;
1277
- box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
1278
- background-color: var(--popup-background-color);
1279
- color: var(--popup-font-color);
1280
- height: auto;
1281
- width: auto;
1282
- overflow: hidden;
1283
- font-size: 14px;
1284
- }
1285
-
1286
- .bio-properties-panel-popup h1,
1287
- .bio-properties-panel-popup h2,
1288
- .bio-properties-panel-popup h3,
1289
- .bio-properties-panel-popup h4 {
1290
- font-weight: 500;
1291
- font-size: inherit;
1292
- }
1293
-
1294
- .bio-properties-panel-popup .bio-properties-panel-popup__header,
1295
- .bio-properties-panel-popup .bio-properties-panel-popup__body,
1296
- .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1297
- padding: 12px;
1298
- display: flex;
1299
- justify-content: center;
1300
- align-items: center;
1301
- }
1302
-
1303
- .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
1304
- padding-top: 0;
1305
- padding-left: 0;
1306
- padding-right: 0;
1307
- }
1308
-
1309
- .bio-properties-panel-popup .bio-properties-panel-popup__header {
1310
- --popup-header-line-height: 16px;
1311
- background-color: var(--popup-header-background-color);
1312
- margin: 0;
1313
- font-size: 12px;
1314
- font-weight: 400;
1315
- line-height: var(--popup-header-line-height);
1316
- text-align: left;
1317
- color: var(--popup-title-color);
1318
- }
1319
-
1320
- .bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
1321
- cursor: grab;
1322
- }
1323
-
1324
- .bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
1325
- display: flex;
1326
- }
1327
-
1328
- .bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
1329
- width: 1px;
1330
- height: 1px;
1331
- position: absolute;
1332
- top: 0;
1333
- }
1334
-
1335
- .bio-properties-panel-popup .bio-properties-panel-popup__title {
1336
- margin-left: 8px;
1337
- }
1338
-
1339
- .bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
1340
- text-transform: capitalize;
1341
- }
1342
-
1343
- .bio-properties-panel-popup .bio-properties-panel-popup__close {
1344
- margin: -12px;
1345
- margin-left: 12px;
1346
- width: 40px;
1347
- height: 40px;
1348
- border: none;
1349
- background-color: var(--popup-header-background-color);
1350
- }
1351
-
1352
- .bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
1353
- .bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
1354
- background-color: var(--popup-background-color);
1355
- }
1356
-
1357
- .bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
1358
- outline-offset: -2px;
1359
- }
1360
-
1361
- .bio-properties-panel-popup .bio-properties-panel-popup__close svg {
1362
- width: 16px;
1363
- height: 16px;
1364
- fill: currentColor;
1365
- margin-top: 2px;
1366
- }
1367
-
1368
- .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
1369
- margin-left: -4px;
1370
- }
1371
-
1372
- .bio-properties-panel-popup .bio-properties-panel-popup__body {
1373
- font-size: inherit;
1374
- height: 100%;
1375
- display: flex;
1376
- overflow: auto;
1377
- padding-bottom: 0;
1378
- }
1379
-
1380
- .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1381
- position: absolute;
1382
- bottom: 0;
1383
- right: 8px;
1384
- }
1385
-
1386
- .bio-properties-panel-feel-popup {
1387
- min-height: 400px;
1388
- width: fit-content;
1389
- }
1390
-
1391
- .bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
1392
- display: flex;
1393
- margin: 0;
1394
- padding: 0;
1395
- height: 100%;
1396
- width: 100%;
1397
- }
1398
-
1399
- .bio-properties-panel-feel-popup__title-link {
1400
- margin-left: 8px;
1401
- display: flex;
1402
- }
1403
-
1404
- .bio-properties-panel-feel-popup__title-link:first-of-type {
1405
- margin-left: auto;
1406
- }
1407
-
1408
- .bio-properties-panel-feel-popup__title-link svg {
1409
- width: var(--popup-header-line-height);
1410
- height: var(--popup-header-line-height);
1411
- fill: currentColor;
1412
- margin: 0 0.5em;
1413
- }
1414
-
1415
- .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
1416
- display: flex;
1417
- min-width: 100%;
1418
- }
1419
-
1420
- .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
1421
- overflow: auto !important;
1422
- }
1423
-
1424
- .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
1425
- width: 100%;
1426
- display: flex;
1427
- }
1428
-
1429
- .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
1430
- display: flex;
1431
- }
1432
-
1433
- .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
1434
- width: 100%;
1435
- }
1436
-
1437
- .bio-properties-panel-feel-popup .bio-properties-panel-input {
1438
- width: 100%;
1439
- resize: none;
1440
- padding: 0;
1441
- overflow: hidden;
1442
- overflow-y: auto
1443
- }
1444
-
1445
- .bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
1446
- display: none !important;
1447
- }
1448
-
1449
- .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
1450
- .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
1451
- position: absolute;
1452
- top: 0;
1453
- right: 0;
1454
- line-height: 1;
1455
- padding: 2px 4px;
1456
- margin: 3px;
1457
- display: none;
1458
- background: none;
1459
- border: none;
1460
- color: var(--feel-open-popup-color);
1461
- cursor: pointer;
1462
- }
1463
-
1464
- .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
1465
- .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
1466
- .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
1467
- .bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup {
1468
- display: block;
1469
- }
1470
-
1471
- .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
1472
- .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
1473
- color: var(--feel-open-popup-hover-color);
1474
- }
1475
-
1476
- .bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
1477
- background: var(--feel-popup-close-background-color);
1478
- width: 66px;
1479
- font-weight: 400;
1480
- font-size: 14px;
1481
- font-family: inherit;
1482
- color: white;
1483
- border: none;
1484
- height: 32px;
1485
- cursor: pointer;
1486
- }
1487
-
1488
- .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor {
1489
- width: 100%;
1490
- height: 100%;
1491
- }
1492
-
1493
- .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor .cm-content {
1494
- padding-left: 4px;
1495
- }
1496
-
1497
- .bio-properties-panel-feel-popup .cm-gutters {
1498
- background-color: var(--feel-popup-gutters-background-color);
1499
- border: none;
1500
- padding: 0;
1501
- }
1502
-
1503
- .bio-properties-panel-feel-popup .cm-gutter {
1504
- min-width: 32px;
1505
- }
1506
-
1507
- .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
1508
- text-align: center;
1509
- }
1
+ /**
2
+ * Theming
3
+ */
4
+ .bio-properties-panel,
5
+ .djs-parent {
6
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
7
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
8
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
9
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
10
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
11
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
12
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
13
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
14
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
15
+ --color-grey-0-0-22: hsl(0, 0%, 22%);
16
+
17
+ --color-blue-205-100-35: hsl(205, 100%, 35%);
18
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
19
+ --color-green-150-86-44: hsl(150, 86%, 44%);
20
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
21
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
22
+ --color-blue-219-99-53: hsl(219, 99%, 53%);
23
+ --color-blue-218-100-74: hsl(218, 100%, 74%);
24
+ --color-blue-205-100-85: hsl(205, 100%, 85%);
25
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
26
+
27
+ --color-red-360-100-40: hsl(360, 100%, 40%);
28
+ --color-red-360-100-45: hsl(360, 100%, 45%);
29
+ --color-red-360-100-92: hsl(360, 100%, 92%);
30
+ --color-red-360-100-97: hsl(360, 100%, 97%);
31
+ --color-white: white;
32
+ --color-black: black;
33
+ --color-transparent: transparent;
34
+
35
+ }
36
+
37
+ .bio-properties-panel {
38
+ --text-base-color: var(--color-grey-225-10-15);
39
+ --text-error-color: var(--color-red-360-100-45);
40
+ --link-color: var(--color-blue-205-100-50);
41
+
42
+ --description-color: var(--color-grey-225-10-35);
43
+ --description-code-background-color: var(--color-grey-225-10-97);
44
+ --description-code-border-color: var(--color-grey-225-10-85);
45
+ --description-list-item-color: var(--color-grey-225-10-35);
46
+
47
+ --placeholder-color: var(--color-grey-225-10-35);
48
+ --placeholder-background-color: var(--color-grey-225-10-95);
49
+
50
+ --header-background-color: var(--color-grey-225-10-95);
51
+ --header-icon-fill-color: var(--color-grey-225-10-15);
52
+ --header-bottom-border-color: var(--color-grey-225-10-75);
53
+
54
+ --group-background-color: var(--color-white);
55
+ --group-bottom-border-color: var(--color-grey-225-10-75);
56
+
57
+ --sticky-group-background-color: var(--color-grey-225-10-95);
58
+ --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
59
+
60
+ --add-entry-fill-color: var(--color-grey-225-10-35);
61
+ --add-entry-hover-fill-color: var(--color-white);
62
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
63
+ --add-entry-label-color: var(--color-white);
64
+
65
+ --remove-entry-fill-color: var(--color-red-360-100-45);
66
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
67
+
68
+ --arrow-fill-color: var(--color-grey-225-10-35);
69
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
70
+
71
+ --dot-color: var(--color-grey-225-10-35);
72
+ --dot-color-error: var(--color-red-360-100-45);
73
+
74
+ --list-badge-color: var(--color-white);
75
+ --list-badge-background-color: var(--color-grey-225-10-35);
76
+
77
+ --input-background-color: var(--color-grey-225-10-97);
78
+ --input-border-color: var(--color-grey-225-10-75);
79
+
80
+ --input-focus-background-color: var(--color-blue-205-100-95);
81
+ --input-focus-border-color: var(--color-blue-205-100-50);
82
+ --focus-outline-color: var(--color-blue-205-100-40);
83
+
84
+ --input-error-background-color: var(--color-red-360-100-97);
85
+ --input-error-border-color: var(--color-red-360-100-45);
86
+ --input-error-focus-border-color: var(--color-red-360-100-45);
87
+
88
+ --input-disabled-color: var(--color-grey-225-10-55);
89
+ --input-disabled-background-color: var(--color-grey-225-10-97);
90
+ --input-disabled-border-color: var(--color-grey-225-10-90);
91
+
92
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
93
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
94
+ --toggle-switch-switcher-background-color: var(--color-white);
95
+
96
+ --side-line-background-color: var(--color-grey-225-10-35);
97
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
98
+
99
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
100
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
101
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
102
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
103
+ --list-entry-add-entry-label-color: var(--color-white);
104
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
105
+ --list-entry-add-entry-fill-color: var(--color-white);
106
+
107
+ --dropdown-item-background-color: var(--color-white);
108
+ --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
109
+ --dropdown-separator-background-color: var(--color-grey-225-10-75);
110
+
111
+ --feel-background-color: transparent;
112
+ --feel-active-color: var(--color-blue-205-100-45);
113
+ --feel-inactive-color: var(--color-grey-225-10-35);
114
+ --feel-hover-color: var(--color-grey-225-10-15);
115
+ --feel-hover-background-color: var(--color-grey-225-10-97);
116
+ --feel-active-background-color: transparent;
117
+ --feel-required-color: var(--color-grey-225-10-55);
118
+ --feel-open-popup-color: hsla(0, 0%, 32%, 1);
119
+ --feel-open-popup-background-color: var(--color-white);
120
+ --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
121
+
122
+ --feel-indicator-background-color: var(--color-grey-225-10-90);
123
+
124
+ --feelers-select-color: var(--color-blue-205-100-85);
125
+
126
+ --text-size-base: 14px;
127
+ --text-size-small: 13px;
128
+ --text-size-smallest: 12px;
129
+ --text-line-height: 21px;
130
+ --line-height-condensed: 17px;
131
+
132
+ --font-family: sans-serif;
133
+ --font-family-monospace: monospace;
134
+
135
+ display: flex;
136
+ flex-direction: column;
137
+ flex: 1;
138
+ position: relative;
139
+ height: 100%;
140
+ width: 100%;
141
+ overflow: hidden;
142
+ }
143
+
144
+ .bio-properties-panel {
145
+ color: var(--text-base-color);
146
+ }
147
+
148
+ .bio-properties-panel * {
149
+ font-size: var(--text-size-base);
150
+ line-height: var(--text-line-height);
151
+ font-weight: 400;
152
+ box-sizing: border-box;
153
+ }
154
+
155
+ .bio-properties-panel {
156
+ font-family: var(--font-family);
157
+ }
158
+
159
+ /**
160
+ * Placeholder (empty, multi select, ...)
161
+ */
162
+ .bio-properties-panel-placeholder {
163
+ position: absolute;
164
+ display: flex;
165
+ flex-direction: column;
166
+ justify-content: center;
167
+ align-items: center;
168
+ top: 0;
169
+ right: 0;
170
+ bottom: 0;
171
+ left: 0;
172
+ background-color: var(--placeholder-background-color);
173
+ }
174
+
175
+ .bio-properties-panel-placeholder-text {
176
+ color: var(--placeholder-color);
177
+ font-size: var(--text-size-base);
178
+ text-align: center;
179
+ margin: 12px 48px;
180
+ }
181
+
182
+ /**
183
+ * Header
184
+ */
185
+ .bio-properties-panel-header {
186
+ display: flex;
187
+ flex-direction: row;
188
+ align-items: center;
189
+ font-size: var(--text-size-base);
190
+ padding: 16px 10px;
191
+ background-color: var(--header-background-color);
192
+ border-bottom: 1px solid var(--header-bottom-border-color);
193
+ width: 100%;
194
+ z-index: 10;
195
+ max-height: 64px;
196
+ overflow: hidden;
197
+ }
198
+
199
+ .bio-properties-panel-header-icon {
200
+ fill: var(--header-icon-fill-color);
201
+ display: flex;
202
+ flex-direction: row;
203
+ align-items: center;
204
+ justify-content: center;
205
+ width: 32px;
206
+ height: 32px;
207
+ }
208
+
209
+ .bio-properties-panel-header-labels {
210
+ overflow: hidden;
211
+ margin-left: 12px;
212
+ user-select: none;
213
+ }
214
+
215
+ .bio-properties-panel-header-type {
216
+ font-size: var(--text-size-smallest);
217
+ font-weight: 600;
218
+ white-space: nowrap;
219
+ text-overflow: ellipsis;
220
+ overflow: hidden;
221
+ text-transform: uppercase;
222
+ }
223
+
224
+ .bio-properties-panel-header-label {
225
+ white-space: nowrap;
226
+ text-overflow: ellipsis;
227
+ overflow: hidden;
228
+ margin-top: -6px;
229
+ }
230
+
231
+ .bio-properties-panel-header-actions {
232
+ margin-left: auto;
233
+ margin-top: auto;
234
+ }
235
+
236
+ /**
237
+ * Scroll container
238
+ */
239
+ .bio-properties-panel-scroll-container {
240
+ overflow-y: auto;
241
+ overflow-x: hidden;
242
+ flex: 1;
243
+ }
244
+
245
+ /**
246
+ * Groups
247
+ */
248
+ .bio-properties-panel-group {
249
+ background-color: var(--group-background-color);
250
+ border-bottom: 1px solid var(--group-bottom-border-color);
251
+ position: relative;
252
+ }
253
+
254
+ .bio-properties-panel-group-header {
255
+ display: flex;
256
+ flex-direction: row;
257
+ align-items: center;
258
+ font-size: var(--text-size-base);
259
+ height: 32px;
260
+ user-select: none;
261
+ justify-content: space-between;
262
+ margin-bottom: -1px; /* avoid double borders */
263
+ position: relative; /* browsers not supporting sticky */
264
+ position: -webkit-sticky; /* for safari */
265
+ position: sticky;
266
+ top: 0;
267
+ z-index: 10;
268
+ }
269
+
270
+ .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
271
+ white-space: nowrap;
272
+ overflow: hidden;
273
+ text-overflow: ellipsis;
274
+ margin: 1px 12px 0;
275
+ }
276
+
277
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
278
+ font-weight: 500;
279
+ }
280
+
281
+ .bio-properties-panel-group-header.sticky {
282
+ background-color: var(--sticky-group-background-color);
283
+ border-bottom: 1px solid var(--sticky-group-bottom-border-color);
284
+ }
285
+
286
+ .bio-properties-panel-group-header-buttons {
287
+ display: flex;
288
+ }
289
+
290
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
291
+ display: inline-flex;
292
+ justify-content: center;
293
+ align-items: center;
294
+ align-self: center;
295
+ height: 22px;
296
+ line-height: 22px;
297
+ min-width: 22px;
298
+ margin: 5px;
299
+ padding: 0 3px;
300
+ border: none;
301
+ background: none;
302
+ }
303
+
304
+ .bio-properties-panel-group-header-button:focus {
305
+ outline-offset: 2px;
306
+ outline-color: var(--focus-outline-color);
307
+ }
308
+
309
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
310
+ margin-right: 0;
311
+ }
312
+
313
+ .bio-properties-panel-add-entry {
314
+ fill: var(--add-entry-fill-color);
315
+ border-radius: 11px;
316
+ }
317
+
318
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
319
+ margin-right: 69px;
320
+ }
321
+
322
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
323
+ margin-right: 19px;
324
+ }
325
+
326
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
327
+ display: none;
328
+ color: var(--add-entry-label-color);
329
+ padding: 0 6px 0 2px;
330
+ }
331
+
332
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
333
+ background-color: var(--add-entry-hover-background-color);
334
+ fill: var(--add-entry-hover-fill-color);
335
+ }
336
+
337
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
338
+ display: block;
339
+ }
340
+
341
+ .bio-properties-panel-group-entries {
342
+ display: none;
343
+ }
344
+
345
+ .bio-properties-panel-group-entries.open {
346
+ display: block;
347
+ }
348
+
349
+ .bio-properties-panel-arrow {
350
+ display: flex;
351
+ justify-content: center;
352
+ text-align: center;
353
+ fill: var(--arrow-fill-color);
354
+ min-width: 22px;
355
+ border-radius: 11px;
356
+ border: none;
357
+ background: none;
358
+ }
359
+
360
+ .bio-properties-panel-arrow:hover {
361
+ background-color: var(--arrow-hover-background-color);
362
+ }
363
+
364
+ .bio-properties-panel-arrow-down {
365
+ transform: rotate(90deg);
366
+ }
367
+
368
+ .bio-properties-panel-dot {
369
+ align-self: center;
370
+ height: 8px;
371
+ min-width: 8px;
372
+ border-radius: 50%;
373
+ margin: 12px;
374
+ background-color: var(--dot-color);
375
+ }
376
+
377
+ .bio-properties-panel-dot--error {
378
+ --dot-color: var(--dot-color-error);
379
+ }
380
+
381
+ /**
382
+ * Lists
383
+ */
384
+ .bio-properties-panel-list {
385
+ display: none;
386
+ }
387
+
388
+ .bio-properties-panel-list.open {
389
+ display: block;
390
+ margin-bottom: 6px;
391
+ padding-bottom: 2px;
392
+ }
393
+
394
+ .bio-properties-panel-list-badge {
395
+ height: 22px;
396
+ min-width: 22px;
397
+ color: var(--list-badge-color);
398
+ border-radius: 11px;
399
+ font-size: var(--text-size-small);
400
+ line-height: 22px;
401
+ text-align: center;
402
+ user-select: none;
403
+ padding: 0 5px;
404
+ margin: 5px;
405
+ background-color: var(--list-badge-background-color);
406
+ }
407
+
408
+ .bio-properties-panel-list-badge--error {
409
+ --list-badge-background-color: var(--dot-color-error);
410
+ }
411
+
412
+ /**
413
+ * Basic entries
414
+ */
415
+ .bio-properties-panel-entry {
416
+ margin: 2px 32px 6px 12px;
417
+ }
418
+
419
+ .bio-properties-panel-entry:last-child {
420
+ padding-bottom: 10px;
421
+ }
422
+
423
+ .bio-properties-panel-label {
424
+ display: block;
425
+ font-size: var(--text-size-small);
426
+ margin: 2px 0 1px;
427
+ }
428
+
429
+ .bio-properties-panel-description,
430
+ .bio-properties-panel-description p,
431
+ .bio-properties-panel-description span,
432
+ .bio-properties-panel-description div {
433
+ color: var(--description-color);
434
+ display: block;
435
+ margin: 2px 0 4px;
436
+ line-height: var(--line-height-condensed);
437
+ font-weight: 400;
438
+ font-size: var(--text-size-small);
439
+ }
440
+
441
+ .bio-properties-panel-description code {
442
+ color: var(--description-color);
443
+ font-family: var(--font-family);
444
+ font-size: var(--text-size-small);
445
+ line-height: var(--line-height-condensed);
446
+ padding: 0 2px;
447
+ background-color: var(--description-code-background-color);
448
+ border: 1px solid var(--description-code-border-color);
449
+ border-radius: 3px;
450
+ }
451
+
452
+ .bio-properties-panel-description pre code {
453
+ width: 100%;
454
+ display: block;
455
+ overflow-x: auto;
456
+ padding: 4px 6px;
457
+ font-family: var(--font-family-monospace);
458
+ }
459
+
460
+ .bio-properties-panel-description ul {
461
+ padding: 0;
462
+ margin: 0 0 0 12px;
463
+ list-style-type: disc;
464
+ }
465
+
466
+ .bio-properties-panel-description li {
467
+ color: var(--description-list-item-color);
468
+ margin: 0 0 0 12px;
469
+ }
470
+
471
+ .bio-properties-panel-description a {
472
+ color: var(--link-color);
473
+ font-size: var(--text-size-small);
474
+ text-decoration: underline;
475
+ }
476
+
477
+ .bio-properties-panel-feelers-editor.bio-properties-panel-input {
478
+ padding: 0;
479
+ }
480
+
481
+ .bio-properties-panel-feelers-input .cm-editor
482
+ {
483
+ min-height: 32px;
484
+ max-height: 215px;
485
+ background-color: transparent;
486
+ }
487
+
488
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused,
489
+ .bio-properties-panel-feelers-input .cm-editor.cm-focused {
490
+ outline: none;
491
+ }
492
+
493
+ .bio-properties-panel-input {
494
+ padding: 3px 6px 2px;
495
+ border: 1px solid var(--input-border-color);
496
+ border-radius: 2px;
497
+ background-color: var(--input-background-color);
498
+ font-size: var(--text-size-base);
499
+ font-family: inherit;
500
+ }
501
+
502
+ .bio-properties-panel-input[type=number],
503
+ select.bio-properties-panel-input,
504
+ textarea.bio-properties-panel-input,
505
+ .bio-properties-panel-input[type=text] {
506
+ display: block;
507
+ width: 100%;
508
+ }
509
+
510
+ textarea.bio-properties-panel-input {
511
+ min-height: 28px;
512
+ }
513
+
514
+ .bio-properties-panel-input:focus,
515
+ .bio-properties-panel-input:focus-within {
516
+ outline: none;
517
+ background-color: var(--input-focus-background-color);
518
+ border: 1px solid var(--input-focus-border-color);
519
+ }
520
+
521
+ .bio-properties-panel-textfield:focus-within,
522
+ .bio-properties-panel-feel-entry:focus-within {
523
+ --input-background-color: var(--input-focus-background-color);
524
+ --input-border-color: var(--input-focus-border-color);
525
+ }
526
+
527
+ .bio-properties-panel-input:disabled {
528
+ border-color: var(--input-disabled-border-color);
529
+ background-color: var(--input-disabled-background-color);
530
+ color: var(--input-disabled-color);
531
+ }
532
+
533
+ select.bio-properties-panel-input {
534
+ padding: 4px 6px;
535
+ }
536
+
537
+ .bio-properties-panel-input-monospace {
538
+ font-family: var(--font-family-monospace);
539
+ }
540
+
541
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
542
+ margin: 0;
543
+ vertical-align: middle;
544
+ }
545
+
546
+ .bio-properties-panel-input[type="checkbox"]:focus {
547
+ outline: auto;
548
+ outline-color: var(--focus-outline-color);
549
+ outline-offset: 2px;
550
+ }
551
+
552
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
553
+ display: inline-block;
554
+ font-size: var(--text-size-base);
555
+ margin-left: 6px;
556
+ margin-top: auto;
557
+ vertical-align: middle;
558
+ }
559
+
560
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
561
+ margin-top: -8px;
562
+ }
563
+
564
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
565
+ margin-left: 18px;
566
+ }
567
+
568
+ textarea.bio-properties-panel-input {
569
+ resize: vertical;
570
+ }
571
+
572
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input,
573
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
574
+ border-color: var(--input-error-border-color);
575
+ background-color: var(--input-error-background-color);
576
+ }
577
+
578
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
579
+ border-color: var(--input-error-border-color);
580
+ }
581
+
582
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
583
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
584
+ border-color: var(--input-error-focus-border-color);
585
+ }
586
+
587
+ .bio-properties-panel-entry .bio-properties-panel-error {
588
+ color: var(--text-error-color);
589
+ margin: 4px 0;
590
+ font-size: var(--text-size-small);
591
+ }
592
+
593
+ .bio-properties-panel-simple {
594
+ width: 100%;
595
+ margin-right: 8px;
596
+ }
597
+
598
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
599
+ margin: auto;
600
+ }
601
+
602
+ /**
603
+ * Toggle Switch
604
+ */
605
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
606
+ margin-top: -8px;
607
+ }
608
+
609
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
610
+ margin-left: 38px;
611
+ }
612
+
613
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
614
+ display: flex;
615
+ flex-direction: row;
616
+ align-items: center;
617
+ }
618
+
619
+ .bio-properties-panel-toggle-switch.inline {
620
+ display: flex;
621
+ flex-direction: row;
622
+ }
623
+
624
+ .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
625
+ margin-left: auto;
626
+ }
627
+
628
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
629
+ font-size: var(--text-size-base);
630
+ }
631
+
632
+ .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
633
+ font-size: var(--text-size-small);
634
+ }
635
+
636
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
637
+ margin: 0;
638
+ margin-left: 6px;
639
+ font-size: var(--text-size-base);
640
+ }
641
+
642
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
643
+ position: relative;
644
+ width: 32px;
645
+ height: 16px;
646
+ }
647
+
648
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
649
+ outline: 2px solid var(--input-focus-border-color);
650
+ outline-offset: 1px;
651
+ }
652
+
653
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
654
+ opacity: 0;
655
+ width: 0;
656
+ height: 0;
657
+ }
658
+
659
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
660
+ position: absolute;
661
+ cursor: pointer;
662
+ top: 0;
663
+ left: 0;
664
+ right: 0;
665
+ bottom: 0;
666
+ background-color: var(--toggle-switch-off-background-color);
667
+ -webkit-transition: 0.4s;
668
+ transition: 0.4s;
669
+ border-radius: 34px;
670
+ }
671
+
672
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
673
+ position: absolute;
674
+ content: "";
675
+ height: 12px;
676
+ width: 12px;
677
+ left: 2px;
678
+ bottom: 2px;
679
+ background-color: var(--toggle-switch-switcher-background-color);
680
+ -webkit-transition: 0.4s;
681
+ transition: 0.4s;
682
+ border-radius: 50%;
683
+ }
684
+
685
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
686
+ background-color: var(--toggle-switch-on-background-color);
687
+ box-shadow: 0 0 1px ;
688
+ }
689
+
690
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
691
+ -webkit-transform: translateX(16px);
692
+ -ms-transform: translateX(16px);
693
+ transform: translateX(16px);
694
+ }
695
+
696
+ /**
697
+ * Collapsible entries
698
+ */
699
+ .bio-properties-panel-collapsible-entry-entries {
700
+ position: relative;
701
+ display: none;
702
+ }
703
+
704
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
705
+ padding-bottom: 0;
706
+ }
707
+
708
+ .bio-properties-panel-collapsible-entry-entries.open {
709
+ display: block;
710
+ }
711
+
712
+ .bio-properties-panel-collapsible-entry-entries {
713
+ padding-left: 20px;
714
+ margin-bottom: 10px;
715
+ position: relative;
716
+ display: none;
717
+ }
718
+
719
+ .bio-properties-panel-collapsible-entry-header {
720
+ position: relative;
721
+ display: flex;
722
+ justify-content: space-between;
723
+ align-items: center;
724
+ overflow: hidden;
725
+ }
726
+
727
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
728
+ padding: 2px 24px 2px 32px;
729
+ font-size: var(--text-size-base);
730
+ white-space: nowrap;
731
+ overflow: hidden;
732
+ text-overflow: ellipsis;
733
+ user-select: none;
734
+ }
735
+
736
+ .bio-properties-panel-collapsible-entry-arrow {
737
+ position: absolute;
738
+ top: 2px;
739
+ left: 6px;
740
+ padding: 0 3px;
741
+ height: 22px;
742
+ display: inline-flex;
743
+ justify-content: center;
744
+ align-items: center;
745
+ align-self: center;
746
+ }
747
+
748
+ .bio-properties-panel-remove-entry {
749
+ display: flex;
750
+ align-items: center;
751
+ justify-content: center;
752
+ margin-right: 5px;
753
+ padding: 0;
754
+ width: 22px;
755
+ height: 22px;
756
+ fill: var(--remove-entry-fill-color);
757
+ border-radius: 50%;
758
+ border: none;
759
+ background: none;
760
+ visibility: hidden;
761
+ }
762
+
763
+ .bio-properties-panel-remove-entry:hover {
764
+ background-color: var(--remove-entry-hover-background-color);
765
+ }
766
+
767
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
768
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
769
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
770
+ {
771
+ visibility: visible;
772
+ }
773
+
774
+ /* Side line */
775
+ .bio-properties-panel-collapsible-entry-entries::before {
776
+ content: "";
777
+ position: absolute;
778
+ left: 16px;
779
+ width: 2px;
780
+ top: -6px;
781
+ bottom: 12px;
782
+ background-color: var(--side-line-background-color);
783
+ border-radius: 1px;
784
+ }
785
+
786
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
787
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
788
+ .bio-properties-panel-list-entry.open:last-child {
789
+ position: relative;
790
+ }
791
+
792
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
793
+ .bio-properties-panel-list-entry.open:last-child::after {
794
+ content: "";
795
+ position: absolute;
796
+ left: -16px;
797
+ width: 2px;
798
+ top: 0;
799
+ bottom: -4px;
800
+ background-color: var(--side-line-extension-background-color);
801
+ border-radius: 1px;
802
+ }
803
+
804
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
805
+ left: -18px;
806
+ }
807
+
808
+ /*
809
+ * List entry
810
+ */
811
+ .bio-properties-panel-list-entry {
812
+ position: relative;
813
+ margin-right: 5px;
814
+ margin-bottom: 0;
815
+ }
816
+
817
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
818
+ margin-right: 0;
819
+ }
820
+
821
+ .bio-properties-panel-list-entry-header {
822
+ position: relative;
823
+ overflow: hidden;
824
+ display: flex;
825
+ justify-content: space-between;
826
+ height: 32px;
827
+ }
828
+
829
+ /* Nested list dot */
830
+ .bio-properties-panel-list-entry::before {
831
+ content: "";
832
+ width: 8px;
833
+ height: 8px;
834
+ position: absolute;
835
+ left: -19px;
836
+ top: 13px;
837
+ border-radius: 50%;
838
+ background-color: var(--list-entry-dot-background-color);
839
+ }
840
+
841
+ .bio-properties-panel-list-entry-header-title {
842
+ display: block;
843
+ margin: auto 0;
844
+ padding: 2px 0;
845
+ font-size: var(--text-size-base);
846
+ white-space: nowrap;
847
+ overflow: hidden;
848
+ text-overflow: ellipsis;
849
+ }
850
+
851
+ .bio-properties-panel-list-entry-header-title.open {
852
+ font-weight: 500;
853
+ }
854
+
855
+ .bio-properties-panel-list-entry-header-buttons {
856
+ display: flex;
857
+ align-items: center;
858
+ }
859
+
860
+ .bio-properties-panel-list-entry-header-buttons > button {
861
+ display: inline-flex;
862
+ justify-content: center;
863
+ align-items: center;
864
+ align-self: center;
865
+ height: 22px;
866
+ line-height: 22px;
867
+ min-width: 22px;
868
+ margin: 5px;
869
+ padding: 0 3px;
870
+ border: none;
871
+ background: none;
872
+ fill: var(--list-entry-header-button-fill-color);
873
+ }
874
+
875
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
876
+ margin-right: 0;
877
+ }
878
+
879
+ .bio-properties-panel-list-entry-items {
880
+ padding: 0;
881
+ margin: 0;
882
+
883
+ list-style: none;
884
+ }
885
+
886
+ .bio-properties-panel-list-entry-items:not(.open) {
887
+ display: none;
888
+ }
889
+
890
+ .bio-properties-panel-list-entry-item {
891
+ display: flex;
892
+ justify-content: space-between;
893
+ }
894
+
895
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
896
+ margin-right: 1px;
897
+ }
898
+
899
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
900
+ width: 100%;
901
+ margin-right: 4px;
902
+ }
903
+
904
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
905
+ margin-left: -8px;
906
+ }
907
+
908
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
909
+ left: 2px;
910
+ }
911
+
912
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
913
+ padding-left: 30px;
914
+ }
915
+
916
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
917
+ padding-left: 10px;
918
+ }
919
+
920
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
921
+ left: 4px;
922
+ }
923
+
924
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
925
+ margin-right: 16px;
926
+ padding-left: 6px;
927
+ }
928
+
929
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
930
+ color: var(--list-entry-add-entry-label-color);
931
+ padding: 4px 6px 3px 2px;
932
+ }
933
+
934
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
935
+ background-color: var(--list-entry-add-entry-background-color);
936
+ fill: var(--list-entry-add-entry-fill-color);
937
+ }
938
+
939
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
940
+ border-radius: 0;
941
+ margin-bottom: -2px;
942
+ }
943
+
944
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
945
+ border-top-left-radius: 2px;
946
+ border-top-right-radius: 2px;
947
+ }
948
+
949
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
950
+ border-bottom-left-radius: 2px;
951
+ border-bottom-right-radius: 2px;
952
+ }
953
+
954
+ .bio-properties-panel-dropdown-button {
955
+ position: relative;
956
+
957
+ --dropdown-button-margin: 5px;
958
+ }
959
+
960
+ .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
961
+ display: none;
962
+ }
963
+
964
+ .bio-properties-panel-dropdown-button__menu {
965
+ min-width: calc(100% - var(--dropdown-button-margin) * 2);
966
+ max-width: 240px;
967
+
968
+ position: absolute;
969
+ top: calc(100% - var(--dropdown-button-margin));
970
+ right: var(--dropdown-button-margin);
971
+ z-index: 101;
972
+
973
+ background-color: var(--dropdown-item-background-color);
974
+
975
+ padding: 8px 0;
976
+
977
+ box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
978
+ }
979
+
980
+ .bio-properties-panel-dropdown-button__menu-item {
981
+ display: block;
982
+ width: 100%;
983
+ padding: 4px 12px;
984
+
985
+ font-size: var(--text-size-small);
986
+ appearance: revert;
987
+ border: unset;
988
+ background: unset;
989
+ text-align: unset;
990
+ }
991
+
992
+ .bio-properties-panel-dropdown-button__menu-item--separator {
993
+ width: 100%;
994
+ height: 1px;
995
+
996
+ padding: 0;
997
+ margin: 8px 0;
998
+
999
+ background-color: var(--dropdown-separator-background-color);
1000
+ }
1001
+
1002
+ .bio-properties-panel-dropdown-button__menu-item--actionable {
1003
+ font-size: var(--text-size-base);
1004
+ }
1005
+
1006
+ .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
1007
+ background-color: var(--dropdown-item-hover-background-color);
1008
+ }
1009
+
1010
+ .bio-properties-panel-feel-input {
1011
+ position: relative;
1012
+ }
1013
+
1014
+ .bio-properties-panel-feel-input input {
1015
+ padding-right: 2em
1016
+ }
1017
+
1018
+ .bio-properties-panel-feel-entry .bio-properties-panel-label {
1019
+ display: flex;
1020
+ }
1021
+
1022
+ .bio-properties-panel-feel-icon {
1023
+ display: inline-flex;
1024
+ height: 18px;
1025
+ width: 22px;
1026
+ vertical-align: text-bottom;
1027
+ padding: 0;
1028
+ margin: 0 3px;
1029
+ align-items: center;
1030
+ align-self: center;
1031
+ justify-content: center;
1032
+ border: none;
1033
+ background: none;
1034
+ border-radius: 3px;
1035
+ }
1036
+
1037
+ .bio-properties-panel-feel-icon.optional {
1038
+ cursor: pointer;
1039
+ background: var(--feel-background-color);
1040
+ }
1041
+
1042
+ .bio-properties-panel-feel-icon svg * {
1043
+ fill: var(--feel-inactive-color);
1044
+ }
1045
+
1046
+ .bio-properties-panel-feel-icon:hover {
1047
+ background: var(--feel-hover-background-color);
1048
+ }
1049
+
1050
+ .bio-properties-panel-feel-icon:hover svg * {
1051
+ fill: var(--feel-hover-color);
1052
+ }
1053
+
1054
+ .bio-properties-panel-feel-icon.active {
1055
+ background: var(--feel-active-background-color);
1056
+ }
1057
+
1058
+ .bio-properties-panel-feel-icon.active:hover {
1059
+ background: var(--feel-hover-background-color);
1060
+ }
1061
+
1062
+ .bio-properties-panel-feel-icon.required.active {
1063
+ background: none;
1064
+ }
1065
+
1066
+ .bio-properties-panel-feel-icon.active svg * {
1067
+ fill: var(--feel-active-color);
1068
+ }
1069
+
1070
+ .bio-properties-panel-feel-icon.required.active svg * {
1071
+ fill: var(--feel-required-color);
1072
+ }
1073
+
1074
+ .bio-properties-panel-feel-editor-container {
1075
+ position: relative;
1076
+ }
1077
+
1078
+ .bio-properties-panel-feel-editor-container.active {
1079
+ font-family: var(--font-family-monospace);
1080
+ }
1081
+
1082
+ .bio-properties-panel-feel-container {
1083
+ position: relative;
1084
+ }
1085
+
1086
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1087
+ position: static;
1088
+ padding-left: 2.4em !important;
1089
+ min-height: 28px;
1090
+ }
1091
+
1092
+ .bio-properties-panel-feel-indicator {
1093
+ position: absolute;
1094
+ border: 1px solid var(--input-border-color);
1095
+ background-color: var(--feel-indicator-background-color);
1096
+ border-right: 0px;
1097
+ border-radius: 2px 0 0 2px;
1098
+ z-index: 1;
1099
+ height: 100%;
1100
+ width: 2em;
1101
+ text-align: center;
1102
+ padding: 2px 6px;
1103
+ }
1104
+
1105
+ .bio-properties-panel-feel-editor-container .cm-scroller {
1106
+ overflow: hidden !important;
1107
+ }
1108
+
1109
+ .bio-properties-panel-feelers-editor .cm-editor {
1110
+ background-color: transparent;
1111
+ }
1112
+
1113
+
1114
+ /* @Note(pinussilvestrus): mitigate low contrast - https://github.com/bpmn-io/cm-theme/issues/4 */
1115
+ .bio-properties-panel-feelers-editor .cm-content ::selection {
1116
+ background: var(--feelers-select-color, hsl(205, 100%, 85%));
1117
+ }
1118
+
1119
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1120
+ background-color: transparent;
1121
+ }
1122
+
1123
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1124
+ resize: none;
1125
+ overflow: hidden;
1126
+ overflow-y: auto;
1127
+ }
1128
+
1129
+ .bio-properties-panel-feel-editor-container,
1130
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1131
+ .bio-properties-panel-feel-container .cm-editor {
1132
+ min-height: 100%;
1133
+ }
1134
+
1135
+ .bio-properties-panel-feel-checkbox,
1136
+ .bio-properties-panel-feel-toggle-switch {
1137
+ padding-top: 1px;
1138
+ }
1139
+
1140
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1141
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1142
+ display: flex;
1143
+ flex-direction: row;
1144
+ align-items: center;
1145
+ }
1146
+
1147
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1148
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1149
+ margin-left: auto;
1150
+ }
1151
+
1152
+ .bio-properties-panel-tooltip-wrapper {
1153
+ text-decoration: underline;
1154
+ text-decoration-style: dotted;
1155
+ text-underline-offset: 2px;
1156
+ font: inherit;
1157
+ display: flex;
1158
+ justify-content: center;
1159
+ width: fit-content;
1160
+ }
1161
+
1162
+ .bio-properties-panel-tooltip {
1163
+ --tooltip-underline-color: var(--color-blue-219-99-53);
1164
+ --tooltip-background-color: var(--color-grey-0-0-22);
1165
+ --tooltip-link: var(--color-blue-218-100-74);
1166
+ --tooltip-code-background-color: var(--color-grey-225-10-97);
1167
+ --tooltip-code-border-color: var(--color-grey-225-10-85);
1168
+
1169
+ display: flex;
1170
+ color: var(--color-white, white);
1171
+ position: fixed;
1172
+ z-index: 1000;
1173
+ max-width: 300px;
1174
+ font-size: var(--text-size-small);
1175
+ font-family: var(--font-family);
1176
+ }
1177
+
1178
+ .bio-properties-panel-tooltip.right {
1179
+ padding-right: 6px;
1180
+ }
1181
+
1182
+ .bio-properties-panel-tooltip.top {
1183
+ flex-direction: column;
1184
+ }
1185
+
1186
+ .bio-properties-panel-tooltip-content {
1187
+ background-color: var(--tooltip-background-color);
1188
+ padding: 16px;
1189
+ border-radius: 2px;
1190
+ font-weight: 400;
1191
+ white-space: pre-wrap;
1192
+ }
1193
+
1194
+ .bio-properties-panel-tooltip-content h1 {
1195
+ font-size: var(--text-size-base);
1196
+ font-weight: bold;
1197
+ margin: 0;
1198
+ }
1199
+
1200
+ .bio-properties-panel-tooltip-content code,
1201
+ .bio-properties-panel-tooltip-content pre {
1202
+ color: var(--description-color);
1203
+ font-family: var(--font-family);
1204
+ font-size: var(--text-size-small);
1205
+ line-height: var(--line-height-condensed);
1206
+ padding: 0 2px;
1207
+ background-color: var(--tooltip-code-background-color);
1208
+ border: 1px solid var(--tooltip-code-border-color);
1209
+ border-radius: 3px;
1210
+ }
1211
+
1212
+ .bio-properties-panel-tooltip-content pre code {
1213
+ border: none;
1214
+ }
1215
+
1216
+ .bio-properties-panel-tooltip p:first-child {
1217
+ margin-top: 0;
1218
+ }
1219
+
1220
+ .bio-properties-panel-tooltip p:last-child {
1221
+ margin-bottom: 0;
1222
+ }
1223
+
1224
+ .bio-properties-panel-tooltip-content a {
1225
+ color: var(--tooltip-link);
1226
+ }
1227
+
1228
+ .bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
1229
+ width: 0;
1230
+ height: 0;
1231
+ border-top: 5px solid transparent;
1232
+ border-bottom: 5px solid transparent;
1233
+ border-left: 5px solid var(--tooltip-background-color);
1234
+ margin-top: 16px;
1235
+ }
1236
+
1237
+ .bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
1238
+ margin-top: -3px;
1239
+ margin-left: calc(50% - 2.5px);
1240
+ transform: rotate(90deg);
1241
+ }
1242
+
1243
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
1244
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
1245
+ display: none;
1246
+ justify-content: center;
1247
+ flex-direction: column;
1248
+ color: hsla(0, 0%, 9%, 0.25);
1249
+ padding: 3px 6px 2px;
1250
+ border: 1px solid var(--input-border-color);
1251
+ border-radius: 2px;
1252
+ background-color: var(--input-background-color);
1253
+ font-size: var(--text-size-base);
1254
+ font-family: inherit;
1255
+ width: 100%;
1256
+ min-height: 100%;
1257
+ }
1258
+
1259
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-input,
1260
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
1261
+ display: none;
1262
+ }
1263
+
1264
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
1265
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
1266
+ display: flex;
1267
+ }
1268
+
1269
+ .bio-properties-panel-popup {
1270
+ --popup-background-color: hsla(0, 0%, 96%, 1);
1271
+ --popup-header-background-color: white;
1272
+ --popup-font-color: hsla(0, 0%, 0%, 1);
1273
+ --popup-title-color: hsla(0, 0%, 0%, 1);
1274
+
1275
+ --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
1276
+ --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
1277
+
1278
+ position: fixed;
1279
+ display: flex;
1280
+ flex: auto;
1281
+ flex-direction: column;
1282
+ font-family: IBM Plex Sans, sans-serif;
1283
+ padding: 0;
1284
+ z-index: 1001;
1285
+ box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
1286
+ background-color: var(--popup-background-color);
1287
+ color: var(--popup-font-color);
1288
+ height: auto;
1289
+ width: auto;
1290
+ overflow: hidden;
1291
+ font-size: 14px;
1292
+ }
1293
+
1294
+ .bio-properties-panel-popup h1,
1295
+ .bio-properties-panel-popup h2,
1296
+ .bio-properties-panel-popup h3,
1297
+ .bio-properties-panel-popup h4 {
1298
+ font-weight: 500;
1299
+ font-size: inherit;
1300
+ }
1301
+
1302
+ .bio-properties-panel-popup .bio-properties-panel-popup__header,
1303
+ .bio-properties-panel-popup .bio-properties-panel-popup__body,
1304
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1305
+ padding: 12px;
1306
+ display: flex;
1307
+ justify-content: center;
1308
+ align-items: center;
1309
+ }
1310
+
1311
+ .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
1312
+ padding-top: 0;
1313
+ padding-left: 0;
1314
+ padding-right: 0;
1315
+ }
1316
+
1317
+ .bio-properties-panel-popup .bio-properties-panel-popup__header {
1318
+ --popup-header-line-height: 16px;
1319
+ background-color: var(--popup-header-background-color);
1320
+ margin: 0;
1321
+ font-size: 12px;
1322
+ font-weight: 400;
1323
+ line-height: var(--popup-header-line-height);
1324
+ text-align: left;
1325
+ color: var(--popup-title-color);
1326
+ }
1327
+
1328
+ .bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
1329
+ cursor: grab;
1330
+ }
1331
+
1332
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
1333
+ display: flex;
1334
+ }
1335
+
1336
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
1337
+ width: 1px;
1338
+ height: 1px;
1339
+ position: absolute;
1340
+ top: 0;
1341
+ }
1342
+
1343
+ .bio-properties-panel-popup .bio-properties-panel-popup__title {
1344
+ margin-left: 8px;
1345
+ }
1346
+
1347
+ .bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
1348
+ text-transform: capitalize;
1349
+ }
1350
+
1351
+ .bio-properties-panel-popup .bio-properties-panel-popup__close {
1352
+ margin: -12px;
1353
+ margin-left: 12px;
1354
+ width: 40px;
1355
+ height: 40px;
1356
+ border: none;
1357
+ background-color: var(--popup-header-background-color);
1358
+ }
1359
+
1360
+ .bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
1361
+ .bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
1362
+ background-color: var(--popup-background-color);
1363
+ }
1364
+
1365
+ .bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
1366
+ outline-offset: -2px;
1367
+ }
1368
+
1369
+ .bio-properties-panel-popup .bio-properties-panel-popup__close svg {
1370
+ width: 16px;
1371
+ height: 16px;
1372
+ fill: currentColor;
1373
+ margin-top: 2px;
1374
+ }
1375
+
1376
+ .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
1377
+ margin-left: -4px;
1378
+ }
1379
+
1380
+ .bio-properties-panel-popup .bio-properties-panel-popup__body {
1381
+ font-size: inherit;
1382
+ height: 100%;
1383
+ display: flex;
1384
+ overflow: auto;
1385
+ padding-bottom: 0;
1386
+ }
1387
+
1388
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1389
+ position: absolute;
1390
+ bottom: 0;
1391
+ right: 8px;
1392
+ }
1393
+
1394
+ .bio-properties-panel-feel-popup {
1395
+ min-height: 400px;
1396
+ width: fit-content;
1397
+ }
1398
+
1399
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
1400
+ display: flex;
1401
+ margin: 0;
1402
+ padding: 0;
1403
+ height: 100%;
1404
+ width: 100%;
1405
+ }
1406
+
1407
+ .bio-properties-panel-feel-popup__title-link {
1408
+ margin-left: 8px;
1409
+ display: flex;
1410
+ }
1411
+
1412
+ .bio-properties-panel-feel-popup__title-link:first-of-type {
1413
+ margin-left: auto;
1414
+ }
1415
+
1416
+ .bio-properties-panel-feel-popup__title-link svg {
1417
+ width: var(--popup-header-line-height);
1418
+ height: var(--popup-header-line-height);
1419
+ fill: currentColor;
1420
+ margin: 0 0.5em;
1421
+ }
1422
+
1423
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
1424
+ display: flex;
1425
+ min-width: 100%;
1426
+ }
1427
+
1428
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
1429
+ overflow: auto !important;
1430
+ }
1431
+
1432
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
1433
+ width: 100%;
1434
+ display: flex;
1435
+ }
1436
+
1437
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
1438
+ display: flex;
1439
+ }
1440
+
1441
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
1442
+ width: 100%;
1443
+ }
1444
+
1445
+ .bio-properties-panel-feel-popup .bio-properties-panel-input {
1446
+ width: 100%;
1447
+ resize: none;
1448
+ padding: 0;
1449
+ overflow: hidden;
1450
+ overflow-y: auto
1451
+ }
1452
+
1453
+ .bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
1454
+ display: none !important;
1455
+ }
1456
+
1457
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
1458
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
1459
+ position: absolute;
1460
+ top: 0;
1461
+ right: 0;
1462
+ line-height: 1;
1463
+ padding: 2px 4px;
1464
+ margin: 3px;
1465
+ display: none;
1466
+ background: none;
1467
+ border: none;
1468
+ color: var(--feel-open-popup-color);
1469
+ cursor: pointer;
1470
+ }
1471
+
1472
+ .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
1473
+ .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
1474
+ .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
1475
+ .bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup {
1476
+ display: block;
1477
+ }
1478
+
1479
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
1480
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
1481
+ color: var(--feel-open-popup-hover-color);
1482
+ }
1483
+
1484
+ .bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
1485
+ background: var(--feel-popup-close-background-color);
1486
+ width: 66px;
1487
+ font-weight: 400;
1488
+ font-size: 14px;
1489
+ font-family: inherit;
1490
+ color: white;
1491
+ border: none;
1492
+ height: 32px;
1493
+ cursor: pointer;
1494
+ }
1495
+
1496
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor {
1497
+ width: 100%;
1498
+ height: 100%;
1499
+ }
1500
+
1501
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor .cm-content {
1502
+ padding-left: 4px;
1503
+ }
1504
+
1505
+ .bio-properties-panel-feel-popup .cm-gutters {
1506
+ background-color: var(--feel-popup-gutters-background-color);
1507
+ border: none;
1508
+ padding: 0;
1509
+ }
1510
+
1511
+ .bio-properties-panel-feel-popup .cm-gutter {
1512
+ min-width: 32px;
1513
+ }
1514
+
1515
+ .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
1516
+ text-align: center;
1517
+ }