camunda-bpmn-js 5.6.0 → 5.6.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 +1521 -1517
  2. package/dist/base-modeler.development.js +367 -371
  3. package/dist/base-modeler.production.min.js +35 -35
  4. package/dist/camunda-cloud-modeler.development.js +570 -513
  5. package/dist/camunda-cloud-modeler.production.min.js +37 -37
  6. package/dist/camunda-platform-modeler.development.js +527 -531
  7. package/dist/camunda-platform-modeler.production.min.js +35 -35
  8. package/package.json +6 -6
package/dist/assets/properties-panel.css CHANGED
@@ -1,1517 +1,1521 @@
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
- }
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 .bio-properties-panel-input {
1506
+ border: none;
1507
+ }
1508
+
1509
+ .bio-properties-panel-feel-popup .cm-gutters {
1510
+ background-color: var(--feel-popup-gutters-background-color);
1511
+ border: none;
1512
+ padding: 0;
1513
+ }
1514
+
1515
+ .bio-properties-panel-feel-popup .cm-gutter {
1516
+ min-width: 32px;
1517
+ }
1518
+
1519
+ .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
1520
+ text-align: center;
1521
+ }