@bpmn-io/properties-panel 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +34 -34
  3. package/assets/properties-panel.css +1190 -1180
  4. package/dist/index.esm.js +750 -651
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +671 -570
  7. package/dist/index.js.map +1 -1
  8. package/package.json +90 -90
package/assets/properties-panel.css CHANGED
@@ -1,1181 +1,1191 @@
1
- /**
2
- * Theming
3
- */
4
- .bio-properties-panel {
5
- --color-grey-225-10-15: hsl(225, 10%, 15%);
6
- --color-grey-225-10-35: hsl(225, 10%, 35%);
7
- --color-grey-225-10-55: hsl(225, 10%, 55%);
8
- --color-grey-225-10-75: hsl(225, 10%, 75%);
9
- --color-grey-225-10-80: hsl(225, 10%, 80%);
10
- --color-grey-225-10-85: hsl(225, 10%, 85%);
11
- --color-grey-225-10-90: hsl(225, 10%, 90%);
12
- --color-grey-225-10-95: hsl(225, 10%, 95%);
13
- --color-grey-225-10-97: hsl(225, 10%, 97%);
14
- --color-grey-0-0-22: hsl(0, 0%, 22%);
15
-
16
- --color-blue-205-100-35: hsl(205, 100%, 35%);
17
- --color-blue-205-100-45: hsl(205, 100%, 45%);
18
- --color-blue-205-100-50: hsl(205, 100%, 50%);
19
- --color-blue-205-100-95: hsl(205, 100%, 95%);
20
- --color-blue-219-99-53: hsl(219, 99%, 53%);
21
- --color-blue-218-100-74: hsl(218, 100%, 74%);
22
- --color-green-150-86-44: hsl(150, 86%, 44%);
23
-
24
- --color-red-360-100-40: hsl(360, 100%, 40%);
25
- --color-red-360-100-45: hsl(360, 100%, 45%);
26
- --color-red-360-100-92: hsl(360, 100%, 92%);
27
- --color-red-360-100-97: hsl(360, 100%, 97%);
28
-
29
- --color-white: white;
30
- --color-black: black;
31
- --color-transparent: transparent;
32
-
33
- --text-base-color: var(--color-grey-225-10-15);
34
- --text-error-color: var(--color-red-360-100-45);
35
- --link-color: var(--color-blue-205-100-50);
36
-
37
- --description-color: var(--color-grey-225-10-35);
38
- --description-code-background-color: var(--color-grey-225-10-97);
39
- --description-code-border-color: var(--color-grey-225-10-85);
40
- --description-list-item-color: var(--color-grey-225-10-35);
41
-
42
- --placeholder-color: var(--color-grey-225-10-35);
43
- --placeholder-background-color: var(--color-grey-225-10-95);
44
-
45
- --header-background-color: var(--color-grey-225-10-95);
46
- --header-icon-fill-color: var(--color-grey-225-10-15);
47
- --header-bottom-border-color: var(--color-grey-225-10-75);
48
-
49
- --group-background-color: var(--color-white);
50
- --group-bottom-border-color: var(--color-grey-225-10-75);
51
-
52
- --sticky-group-background-color: var(--color-grey-225-10-95);
53
- --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
54
-
55
- --add-entry-fill-color: var(--color-grey-225-10-35);
56
- --add-entry-hover-fill-color: var(--color-white);
57
- --add-entry-hover-background-color: var(--color-blue-205-100-50);
58
- --add-entry-label-color: var(--color-white);
59
-
60
- --remove-entry-fill-color: var(--color-red-360-100-45);
61
- --remove-entry-hover-background-color: var(--color-red-360-100-92);
62
-
63
- --arrow-fill-color: var(--color-grey-225-10-35);
64
- --arrow-hover-background-color: var(--color-grey-225-10-95);
65
-
66
- --dot-color: var(--color-grey-225-10-35);
67
- --dot-color-error: var(--color-red-360-100-45);
68
-
69
- --list-badge-color: var(--color-white);
70
- --list-badge-background-color: var(--color-grey-225-10-35);
71
-
72
- --input-background-color: var(--color-grey-225-10-97);
73
- --input-border-color: var(--color-grey-225-10-75);
74
-
75
- --input-focus-background-color: var(--color-blue-205-100-95);
76
- --input-focus-border-color: var(--color-blue-205-100-50);
77
-
78
- --input-error-background-color: var(--color-red-360-100-97);
79
- --input-error-border-color: var(--color-red-360-100-45);
80
- --input-error-focus-border-color: var(--color-red-360-100-45);
81
-
82
- --input-disabled-color: var(--color-grey-225-10-55);
83
- --input-disabled-background-color: var(--color-grey-225-10-97);
84
- --input-disabled-border-color: var(--color-grey-225-10-90);
85
-
86
- --toggle-switch-on-background-color: var(--color-blue-205-100-50);
87
- --toggle-switch-off-background-color: var(--color-grey-225-10-75);
88
- --toggle-switch-switcher-background-color: var(--color-white);
89
-
90
- --side-line-background-color: var(--color-grey-225-10-35);
91
- --side-line-extension-background-color: var(--color-grey-225-10-35);
92
-
93
- --list-entry-dot-background-color: var(--color-grey-225-10-35);
94
- --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
95
- --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
96
- --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
97
- --list-entry-add-entry-label-color: var(--color-white);
98
- --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
99
- --list-entry-add-entry-fill-color: var(--color-white);
100
-
101
- --dropdown-item-background-color: var(--color-white);
102
- --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
103
- --dropdown-separator-background-color: var(--color-grey-225-10-75);
104
-
105
- --feel-background-color: transparent;
106
- --feel-active-color: var(--color-blue-205-100-45);
107
- --feel-inactive-color: var(--color-grey-225-10-35);
108
- --feel-hover-color: var(--color-grey-225-10-15);
109
- --feel-hover-background-color: var(--color-grey-225-10-97);
110
- --feel-active-background-color: transparent;
111
- --feel-required-color: var(--color-grey-225-10-55);
112
-
113
- --feel-indicator-background-color: var(--color-grey-225-10-90);
114
-
115
- --tooltip-underline-color: var(--color-blue-219-99-53);
116
- --tooltip-background-color: var(--color-grey-0-0-22);
117
- --tooltip-link: var(--color-blue-218-100-74);
118
- --tooltip-code-background-color: var(--color-grey-225-10-97);
119
- --tooltip-code-border-color: var(--color-grey-225-10-85);
120
-
121
- --text-size-base: 14px;
122
- --text-size-small: 13px;
123
- --text-size-smallest: 12px;
124
- --text-line-height: 21px;
125
- --line-height-condensed: 17px;
126
-
127
- --font-family: sans-serif;
128
- --font-family-monospace: monospace;
129
-
130
- display: flex;
131
- flex-direction: column;
132
- flex: 1;
133
- position: relative;
134
- height: 100%;
135
- width: 100%;
136
- overflow: hidden;
137
- }
138
-
139
- .bio-properties-panel {
140
- color: var(--text-base-color);
141
- }
142
-
143
- .bio-properties-panel * {
144
- font-size: var(--text-size-base);
145
- line-height: var(--text-line-height);
146
- font-weight: 400;
147
- box-sizing: border-box;
148
- }
149
-
150
- .bio-properties-panel {
151
- font-family: var(--font-family);
152
- }
153
-
154
- /**
155
- * Placeholder (empty, multi select, ...)
156
- */
157
- .bio-properties-panel-placeholder {
158
- position: absolute;
159
- display: flex;
160
- flex-direction: column;
161
- justify-content: center;
162
- align-items: center;
163
- top: 0;
164
- right: 0;
165
- bottom: 0;
166
- left: 0;
167
- background-color: var(--placeholder-background-color);
168
- }
169
-
170
- .bio-properties-panel-placeholder-text {
171
- color: var(--placeholder-color);
172
- font-size: var(--text-size-base);
173
- text-align: center;
174
- margin: 12px 48px;
175
- }
176
-
177
- /**
178
- * Header
179
- */
180
- .bio-properties-panel-header {
181
- display: flex;
182
- flex-direction: row;
183
- align-items: center;
184
- font-size: var(--text-size-base);
185
- padding: 16px 10px;
186
- background-color: var(--header-background-color);
187
- border-bottom: 1px solid var(--header-bottom-border-color);
188
- width: 100%;
189
- z-index: 10;
190
- max-height: 64px;
191
- overflow: hidden;
192
- }
193
-
194
- .bio-properties-panel-header-icon {
195
- fill: var(--header-icon-fill-color);
196
- display: flex;
197
- flex-direction: row;
198
- align-items: center;
199
- justify-content: center;
200
- width: 32px;
201
- height: 32px;
202
- }
203
-
204
- .bio-properties-panel-header-labels {
205
- overflow: hidden;
206
- margin-left: 12px;
207
- user-select: none;
208
- }
209
-
210
- .bio-properties-panel-header-type {
211
- font-size: var(--text-size-smallest);
212
- font-weight: 600;
213
- white-space: nowrap;
214
- text-overflow: ellipsis;
215
- overflow: hidden;
216
- text-transform: uppercase;
217
- }
218
-
219
- .bio-properties-panel-header-label {
220
- white-space: nowrap;
221
- text-overflow: ellipsis;
222
- overflow: hidden;
223
- margin-top: -6px;
224
- }
225
-
226
- .bio-properties-panel-header-actions {
227
- margin-left: auto;
228
- margin-top: auto;
229
- }
230
-
231
- /**
232
- * Scroll container
233
- */
234
- .bio-properties-panel-scroll-container {
235
- overflow-y: auto;
236
- overflow-x: hidden;
237
- flex: 1;
238
- }
239
-
240
- /**
241
- * Groups
242
- */
243
- .bio-properties-panel-group {
244
- background-color: var(--group-background-color);
245
- border-bottom: 1px solid var(--group-bottom-border-color);
246
- position: relative;
247
- }
248
-
249
- .bio-properties-panel-group-header {
250
- display: flex;
251
- flex-direction: row;
252
- align-items: center;
253
- font-size: var(--text-size-base);
254
- height: 32px;
255
- user-select: none;
256
- justify-content: space-between;
257
- margin-bottom: -1px; /* avoid double borders */
258
- position: relative; /* browsers not supporting sticky */
259
- position: -webkit-sticky; /* for safari */
260
- position: sticky;
261
- top: 0;
262
- z-index: 10;
263
- }
264
-
265
- .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
266
- white-space: nowrap;
267
- overflow: hidden;
268
- text-overflow: ellipsis;
269
- margin: 1px 12px 0;
270
- }
271
-
272
- .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
273
- font-weight: 500;
274
- }
275
-
276
- .bio-properties-panel-group-header.sticky {
277
- background-color: var(--sticky-group-background-color);
278
- border-bottom: 1px solid var(--sticky-group-bottom-border-color);
279
- }
280
-
281
- .bio-properties-panel-group-header-buttons {
282
- display: flex;
283
- }
284
-
285
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
286
- display: inline-flex;
287
- justify-content: center;
288
- align-items: center;
289
- align-self: center;
290
- height: 22px;
291
- line-height: 22px;
292
- min-width: 22px;
293
- margin: 5px;
294
- padding: 0 3px;
295
- border: none;
296
- background: none;
297
- }
298
-
299
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
300
- margin-right: 0;
301
- }
302
-
303
- .bio-properties-panel-add-entry {
304
- fill: var(--add-entry-fill-color);
305
- border-radius: 11px;
306
- }
307
-
308
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
309
- margin-right: 69px;
310
- }
311
-
312
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
313
- margin-right: 19px;
314
- }
315
-
316
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
317
- display: none;
318
- color: var(--add-entry-label-color);
319
- padding: 0 6px 0 2px;
320
- }
321
-
322
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
323
- background-color: var(--add-entry-hover-background-color);
324
- fill: var(--add-entry-hover-fill-color);
325
- }
326
-
327
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
328
- display: block;
329
- }
330
-
331
- .bio-properties-panel-group-entries {
332
- display: none;
333
- }
334
-
335
- .bio-properties-panel-group-entries.open {
336
- display: block;
337
- }
338
-
339
- .bio-properties-panel-arrow {
340
- display: flex;
341
- justify-content: center;
342
- text-align: center;
343
- fill: var(--arrow-fill-color);
344
- min-width: 22px;
345
- border-radius: 11px;
346
- border: none;
347
- background: none;
348
- }
349
-
350
- .bio-properties-panel-arrow:hover {
351
- background-color: var(--arrow-hover-background-color);
352
- }
353
-
354
- .bio-properties-panel-arrow-down {
355
- transform: rotate(90deg);
356
- }
357
-
358
- .bio-properties-panel-dot {
359
- align-self: center;
360
- height: 8px;
361
- min-width: 8px;
362
- border-radius: 50%;
363
- margin: 12px;
364
- background-color: var(--dot-color);
365
- }
366
-
367
- .bio-properties-panel-dot--error {
368
- --dot-color: var(--dot-color-error);
369
- }
370
-
371
- /**
372
- * Lists
373
- */
374
- .bio-properties-panel-list {
375
- display: none;
376
- }
377
-
378
- .bio-properties-panel-list.open {
379
- display: block;
380
- margin-bottom: 6px;
381
- padding-bottom: 2px;
382
- }
383
-
384
- .bio-properties-panel-list-badge {
385
- height: 22px;
386
- min-width: 22px;
387
- color: var(--list-badge-color);
388
- border-radius: 11px;
389
- font-size: var(--text-size-small);
390
- line-height: 22px;
391
- text-align: center;
392
- user-select: none;
393
- padding: 0 5px;
394
- margin: 5px;
395
- background-color: var(--list-badge-background-color);
396
- }
397
-
398
- .bio-properties-panel-list-badge--error {
399
- --list-badge-background-color: var(--dot-color-error);
400
- }
401
-
402
- /**
403
- * Basic entries
404
- */
405
- .bio-properties-panel-entry {
406
- margin: 2px 32px 6px 12px;
407
- }
408
-
409
- .bio-properties-panel-entry:last-child {
410
- padding-bottom: 10px;
411
- }
412
-
413
- .bio-properties-panel-label {
414
- display: block;
415
- font-size: var(--text-size-small);
416
- margin: 2px 0 1px;
417
- }
418
-
419
- .bio-properties-panel-description,
420
- .bio-properties-panel-description p,
421
- .bio-properties-panel-description span,
422
- .bio-properties-panel-description div {
423
- color: var(--description-color);
424
- display: block;
425
- margin: 2px 0 4px;
426
- line-height: var(--line-height-condensed);
427
- font-weight: 400;
428
- font-size: var(--text-size-small);
429
- }
430
-
431
- .bio-properties-panel-description code {
432
- color: var(--description-color);
433
- font-family: var(--font-family);
434
- font-size: var(--text-size-small);
435
- line-height: var(--line-height-condensed);
436
- padding: 0 2px;
437
- background-color: var(--description-code-background-color);
438
- border: 1px solid var(--description-code-border-color);
439
- border-radius: 3px;
440
- }
441
-
442
- .bio-properties-panel-description pre code {
443
- width: 100%;
444
- display: block;
445
- overflow-x: auto;
446
- padding: 4px 6px;
447
- font-family: var(--font-family-monospace);
448
- }
449
-
450
- .bio-properties-panel-description ul {
451
- padding: 0;
452
- margin: 0 0 0 12px;
453
- list-style-type: disc;
454
- }
455
-
456
- .bio-properties-panel-description li {
457
- color: var(--description-list-item-color);
458
- margin: 0 0 0 12px;
459
- }
460
-
461
- .bio-properties-panel-description a {
462
- color: var(--link-color);
463
- font-size: var(--text-size-small);
464
- text-decoration: underline;
465
- }
466
-
467
- .bio-properties-panel-feelers-editor.bio-properties-panel-input {
468
- padding: 0;
469
- }
470
-
471
- .bio-properties-panel-feelers-input .cm-editor
472
- {
473
- min-height: 32px;
474
- max-height: 215px;
475
- background-color: transparent;
476
- }
477
-
478
- .bio-properties-panel-feelers-editor .cm-editor.cm-focused,
479
- .bio-properties-panel-feelers-input .cm-editor.cm-focused {
480
- outline: none;
481
- }
482
-
483
- .bio-properties-panel-input {
484
- padding: 3px 6px 2px;
485
- border: 1px solid var(--input-border-color);
486
- border-radius: 2px;
487
- background-color: var(--input-background-color);
488
- font-size: var(--text-size-base);
489
- font-family: inherit;
490
- }
491
-
492
- .bio-properties-panel-input[type=number],
493
- select.bio-properties-panel-input,
494
- textarea.bio-properties-panel-input,
495
- .bio-properties-panel-input[type=text] {
496
- display: block;
497
- width: 100%;
498
- }
499
-
500
- textarea.bio-properties-panel-input {
501
- min-height: 28px;
502
- }
503
-
504
- .bio-properties-panel-input:focus,
505
- .bio-properties-panel-input:focus-within {
506
- outline: none;
507
- background-color: var(--input-focus-background-color);
508
- border: 1px solid var(--input-focus-border-color);
509
- }
510
-
511
- .bio-properties-panel-textfield:focus-within,
512
- .bio-properties-panel-feel-entry:focus-within {
513
- --input-background-color: var(--input-focus-background-color);
514
- --input-border-color: var(--input-focus-border-color);
515
- }
516
-
517
- .bio-properties-panel-input:disabled {
518
- border-color: var(--input-disabled-border-color);
519
- background-color: var(--input-disabled-background-color);
520
- color: var(--input-disabled-color);
521
- }
522
-
523
- select.bio-properties-panel-input {
524
- padding: 4px 6px;
525
- }
526
-
527
- .bio-properties-panel-input-monospace {
528
- font-family: var(--font-family-monospace);
529
- }
530
-
531
- .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
532
- margin: 0;
533
- vertical-align: middle;
534
- }
535
-
536
- .bio-properties-panel-input[type="checkbox"]:focus {
537
- outline: 2px solid var(--input-focus-border-color);
538
- outline-offset: 0;
539
- }
540
-
541
- .bio-properties-panel-checkbox > .bio-properties-panel-label {
542
- display: inline-block;
543
- font-size: var(--text-size-base);
544
- margin-left: 6px;
545
- margin-top: auto;
546
- vertical-align: middle;
547
- }
548
-
549
- .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
550
- margin-top: -8px;
551
- }
552
-
553
- .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
554
- margin-left: 18px;
555
- }
556
-
557
- textarea.bio-properties-panel-input {
558
- resize: vertical;
559
- }
560
-
561
- .bio-properties-panel-entry.has-error .bio-properties-panel-input {
562
- border-color: var(--input-error-border-color);
563
- background-color: var(--input-error-background-color);
564
- }
565
-
566
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
567
- border-color: var(--input-error-border-color);
568
- }
569
-
570
- .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
571
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
572
- border-color: var(--input-error-focus-border-color);
573
- }
574
-
575
- .bio-properties-panel-entry .bio-properties-panel-error {
576
- color: var(--text-error-color);
577
- margin: 4px 0;
578
- font-size: var(--text-size-small);
579
- }
580
-
581
- .bio-properties-panel-simple {
582
- width: 100%;
583
- margin-right: 8px;
584
- }
585
-
586
- .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
587
- margin: auto;
588
- }
589
-
590
- /**
591
- * Toggle Switch
592
- */
593
- .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
594
- margin-top: -8px;
595
- }
596
-
597
- .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
598
- margin-left: 38px;
599
- }
600
-
601
- .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
602
- display: flex;
603
- flex-direction: row;
604
- align-items: center;
605
- }
606
-
607
- .bio-properties-panel-toggle-switch.inline {
608
- display: flex;
609
- flex-direction: row;
610
- }
611
-
612
- .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
613
- margin-left: auto;
614
- }
615
-
616
- .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
617
- font-size: var(--text-size-base);
618
- }
619
-
620
- .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
621
- font-size: var(--text-size-small);
622
- }
623
-
624
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
625
- margin: 0;
626
- margin-left: 6px;
627
- font-size: var(--text-size-base);
628
- }
629
-
630
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
631
- position: relative;
632
- width: 32px;
633
- height: 16px;
634
- }
635
-
636
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
637
- outline: 2px solid var(--input-focus-border-color);
638
- outline-offset: 1px;
639
- }
640
-
641
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
642
- opacity: 0;
643
- width: 0;
644
- height: 0;
645
- }
646
-
647
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
648
- position: absolute;
649
- cursor: pointer;
650
- top: 0;
651
- left: 0;
652
- right: 0;
653
- bottom: 0;
654
- background-color: var(--toggle-switch-off-background-color);
655
- -webkit-transition: 0.4s;
656
- transition: 0.4s;
657
- border-radius: 34px;
658
- }
659
-
660
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
661
- position: absolute;
662
- content: "";
663
- height: 12px;
664
- width: 12px;
665
- left: 2px;
666
- bottom: 2px;
667
- background-color: var(--toggle-switch-switcher-background-color);
668
- -webkit-transition: 0.4s;
669
- transition: 0.4s;
670
- border-radius: 50%;
671
- }
672
-
673
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
674
- background-color: var(--toggle-switch-on-background-color);
675
- box-shadow: 0 0 1px ;
676
- }
677
-
678
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
679
- -webkit-transform: translateX(16px);
680
- -ms-transform: translateX(16px);
681
- transform: translateX(16px);
682
- }
683
-
684
- /**
685
- * Collapsible entries
686
- */
687
- .bio-properties-panel-collapsible-entry-entries {
688
- position: relative;
689
- display: none;
690
- }
691
-
692
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
693
- padding-bottom: 0;
694
- }
695
-
696
- .bio-properties-panel-collapsible-entry-entries.open {
697
- display: block;
698
- }
699
-
700
- .bio-properties-panel-collapsible-entry-entries {
701
- padding-left: 20px;
702
- margin-bottom: 10px;
703
- position: relative;
704
- display: none;
705
- }
706
-
707
- .bio-properties-panel-collapsible-entry-header {
708
- position: relative;
709
- display: flex;
710
- justify-content: space-between;
711
- align-items: center;
712
- overflow: hidden;
713
- }
714
-
715
- .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
716
- padding: 2px 24px 2px 32px;
717
- font-size: var(--text-size-base);
718
- white-space: nowrap;
719
- overflow: hidden;
720
- text-overflow: ellipsis;
721
- user-select: none;
722
- }
723
-
724
- .bio-properties-panel-collapsible-entry-arrow {
725
- position: absolute;
726
- top: 2px;
727
- left: 6px;
728
- padding: 0 3px;
729
- height: 22px;
730
- display: inline-flex;
731
- justify-content: center;
732
- align-items: center;
733
- align-self: center;
734
- }
735
-
736
- .bio-properties-panel-remove-entry {
737
- display: flex;
738
- align-items: center;
739
- justify-content: center;
740
- margin-right: 5px;
741
- padding: 0;
742
- width: 22px;
743
- height: 22px;
744
- fill: var(--remove-entry-fill-color);
745
- border-radius: 50%;
746
- border: none;
747
- background: none;
748
- visibility: hidden;
749
- }
750
-
751
- .bio-properties-panel-remove-entry:hover {
752
- background-color: var(--remove-entry-hover-background-color);
753
- }
754
-
755
- .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
756
- .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
757
- .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
758
- {
759
- visibility: visible;
760
- }
761
-
762
- /* Side line */
763
- .bio-properties-panel-collapsible-entry-entries::before {
764
- content: "";
765
- position: absolute;
766
- left: 16px;
767
- width: 2px;
768
- top: -6px;
769
- bottom: 12px;
770
- background-color: var(--side-line-background-color);
771
- border-radius: 1px;
772
- }
773
-
774
- /* Side line extension for non-list entry or open list entry positioned as the last one. */
775
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
776
- .bio-properties-panel-list-entry.open:last-child {
777
- position: relative;
778
- }
779
-
780
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
781
- .bio-properties-panel-list-entry.open:last-child::after {
782
- content: "";
783
- position: absolute;
784
- left: -16px;
785
- width: 2px;
786
- top: 0;
787
- bottom: -4px;
788
- background-color: var(--side-line-extension-background-color);
789
- border-radius: 1px;
790
- }
791
-
792
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
793
- left: -18px;
794
- }
795
-
796
- /*
797
- * List entry
798
- */
799
- .bio-properties-panel-list-entry {
800
- position: relative;
801
- margin-right: 5px;
802
- margin-bottom: 0;
803
- }
804
-
805
- .bio-properties-panel-list-entry .bio-properties-panel-entry {
806
- margin-right: 0;
807
- }
808
-
809
- .bio-properties-panel-list-entry-header {
810
- position: relative;
811
- overflow: hidden;
812
- display: flex;
813
- justify-content: space-between;
814
- height: 32px;
815
- }
816
-
817
- /* Nested list dot */
818
- .bio-properties-panel-list-entry::before {
819
- content: "";
820
- width: 8px;
821
- height: 8px;
822
- position: absolute;
823
- left: -19px;
824
- top: 13px;
825
- border-radius: 50%;
826
- background-color: var(--list-entry-dot-background-color);
827
- }
828
-
829
- .bio-properties-panel-list-entry-header-title {
830
- display: block;
831
- margin: auto 0;
832
- padding: 2px 0;
833
- font-size: var(--text-size-base);
834
- white-space: nowrap;
835
- overflow: hidden;
836
- text-overflow: ellipsis;
837
- }
838
-
839
- .bio-properties-panel-list-entry-header-title.open {
840
- font-weight: 500;
841
- }
842
-
843
- .bio-properties-panel-list-entry-header-buttons {
844
- display: flex;
845
- align-items: center;
846
- }
847
-
848
- .bio-properties-panel-list-entry-header-buttons > button {
849
- display: inline-flex;
850
- justify-content: center;
851
- align-items: center;
852
- align-self: center;
853
- height: 22px;
854
- line-height: 22px;
855
- min-width: 22px;
856
- margin: 5px;
857
- padding: 0 3px;
858
- border: none;
859
- background: none;
860
- fill: var(--list-entry-header-button-fill-color);
861
- }
862
-
863
- .bio-properties-panel-list-entry-header-buttons > :last-child {
864
- margin-right: 0;
865
- }
866
-
867
- .bio-properties-panel-list-entry-items {
868
- padding: 0;
869
- margin: 0;
870
-
871
- list-style: none;
872
- }
873
-
874
- .bio-properties-panel-list-entry-items:not(.open) {
875
- display: none;
876
- }
877
-
878
- .bio-properties-panel-list-entry-item {
879
- display: flex;
880
- justify-content: space-between;
881
- }
882
-
883
- .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
884
- margin-right: 1px;
885
- }
886
-
887
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
888
- width: 100%;
889
- margin-right: 4px;
890
- }
891
-
892
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
893
- margin-left: -8px;
894
- }
895
-
896
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
897
- left: 2px;
898
- }
899
-
900
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
901
- padding-left: 30px;
902
- }
903
-
904
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
905
- padding-left: 10px;
906
- }
907
-
908
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
909
- left: 4px;
910
- }
911
-
912
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
913
- margin-right: 16px;
914
- padding-left: 6px;
915
- }
916
-
917
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
918
- color: var(--list-entry-add-entry-label-color);
919
- padding: 4px 6px 3px 2px;
920
- }
921
-
922
- .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
923
- background-color: var(--list-entry-add-entry-background-color);
924
- fill: var(--list-entry-add-entry-fill-color);
925
- }
926
-
927
- .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
928
- border-radius: 0;
929
- margin-bottom: -2px;
930
- }
931
-
932
- .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
933
- border-top-left-radius: 2px;
934
- border-top-right-radius: 2px;
935
- }
936
-
937
- .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
938
- border-bottom-left-radius: 2px;
939
- border-bottom-right-radius: 2px;
940
- }
941
-
942
- .bio-properties-panel-dropdown-button {
943
- position: relative;
944
-
945
- --dropdown-button-margin: 5px;
946
- }
947
-
948
- .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
949
- display: none;
950
- }
951
-
952
- .bio-properties-panel-dropdown-button__menu {
953
- min-width: calc(100% - var(--dropdown-button-margin) * 2);
954
- max-width: 240px;
955
-
956
- position: absolute;
957
- top: calc(100% - var(--dropdown-button-margin));
958
- right: var(--dropdown-button-margin);
959
- z-index: 101;
960
-
961
- background-color: var(--dropdown-item-background-color);
962
-
963
- padding: 8px 0;
964
-
965
- box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
966
- }
967
-
968
- .bio-properties-panel-dropdown-button__menu-item {
969
- display: block;
970
- width: 100%;
971
- padding: 4px 12px;
972
-
973
- font-size: var(--text-size-small);
974
- appearance: revert;
975
- border: unset;
976
- background: unset;
977
- text-align: unset;
978
- }
979
-
980
- .bio-properties-panel-dropdown-button__menu-item--separator {
981
- width: 100%;
982
- height: 1px;
983
-
984
- padding: 0;
985
- margin: 8px 0;
986
-
987
- background-color: var(--dropdown-separator-background-color);
988
- }
989
-
990
- .bio-properties-panel-dropdown-button__menu-item--actionable {
991
- font-size: var(--text-size-base);
992
- }
993
-
994
- .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
995
- background-color: var(--dropdown-item-hover-background-color);
996
- }
997
-
998
- .bio-properties-panel-feel-input {
999
- position: relative;
1000
- }
1001
-
1002
- .bio-properties-panel-feel-input input {
1003
- padding-right: 2em
1004
- }
1005
-
1006
- .bio-properties-panel-feel-entry .bio-properties-panel-label {
1007
- display: flex;
1008
- }
1009
-
1010
- .bio-properties-panel-feel-icon {
1011
- display: inline-flex;
1012
- height: 18px;
1013
- width: 22px;
1014
- vertical-align: text-bottom;
1015
- padding: 0;
1016
- margin: 0 3px;
1017
- align-items: center;
1018
- align-self: center;
1019
- justify-content: center;
1020
- border: none;
1021
- background: none;
1022
- border-radius: 3px;
1023
- }
1024
-
1025
- .bio-properties-panel-feel-icon.optional {
1026
- cursor: pointer;
1027
- background: var(--feel-background-color);
1028
- }
1029
-
1030
- .bio-properties-panel-feel-icon svg * {
1031
- fill: var(--feel-inactive-color);
1032
- }
1033
-
1034
- .bio-properties-panel-feel-icon:hover {
1035
- background: var(--feel-hover-background-color);
1036
- }
1037
-
1038
- .bio-properties-panel-feel-icon:hover svg * {
1039
- fill: var(--feel-hover-color);
1040
- }
1041
-
1042
- .bio-properties-panel-feel-icon.active {
1043
- background: var(--feel-active-background-color);
1044
- }
1045
-
1046
- .bio-properties-panel-feel-icon.active:hover {
1047
- background: var(--feel-hover-background-color);
1048
- }
1049
-
1050
- .bio-properties-panel-feel-icon.required.active {
1051
- background: none;
1052
- }
1053
-
1054
- .bio-properties-panel-feel-icon.active svg * {
1055
- fill: var(--feel-active-color);
1056
- }
1057
-
1058
- .bio-properties-panel-feel-icon.required.active svg * {
1059
- fill: var(--feel-required-color);
1060
- }
1061
-
1062
- .bio-properties-panel-feel-editor-container {
1063
- position: relative;
1064
- }
1065
-
1066
- .bio-properties-panel-feel-editor-container.active {
1067
- font-family: var(--font-family-monospace);
1068
- }
1069
-
1070
- .bio-properties-panel-feel-container {
1071
- position: relative;
1072
- }
1073
-
1074
- .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1075
- position: static;
1076
- padding-left: 2.4em !important;
1077
- min-height: 28px;
1078
- }
1079
-
1080
- .bio-properties-panel-feel-indicator {
1081
- position: absolute;
1082
- border: 1px solid var(--input-border-color);
1083
- background-color: var(--feel-indicator-background-color);
1084
- border-right: 0px;
1085
- border-radius: 2px 0 0 2px;
1086
- z-index: 1;
1087
- height: 100%;
1088
- width: 2em;
1089
- text-align: center;
1090
- padding: 2px 6px;
1091
- }
1092
-
1093
- .bio-properties-panel-feel-editor-container .cm-scroller {
1094
- overflow: hidden !important;
1095
- }
1096
-
1097
- .bio-properties-panel-feelers-editor .cm-editor {
1098
- background-color: transparent;
1099
- }
1100
-
1101
- .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1102
- background-color: transparent;
1103
- }
1104
-
1105
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1106
- resize: vertical;
1107
- overflow: hidden;
1108
- overflow-y: auto;
1109
- }
1110
-
1111
- .bio-properties-panel-feel-editor-container,
1112
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1113
- .bio-properties-panel-feel-container .cm-editor {
1114
- min-height: 100%;
1115
- }
1116
-
1117
- .bio-properties-panel-feel-checkbox,
1118
- .bio-properties-panel-feel-toggle-switch {
1119
- padding-top: 1px;
1120
- }
1121
-
1122
- .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1123
- .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1124
- display: flex;
1125
- flex-direction: row;
1126
- align-items: center;
1127
- }
1128
-
1129
- .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1130
- .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1131
- margin-left: auto;
1132
- }
1133
-
1134
- .bio-properties-panel-tooltip-wrapper {
1135
- text-decoration: underline;
1136
- text-decoration-style: dotted;
1137
- text-underline-offset: 2px;
1138
- }
1139
-
1140
- .bio-properties-panel-tooltip {
1141
- display: flex;
1142
- color: var(--color-white, white);
1143
- position: fixed;
1144
- z-index: 1000;
1145
- padding-right: 6px;
1146
- max-width: 300px;
1147
- font-size: var(--text-size-small);
1148
- font-family: var(--font-family);
1149
- }
1150
-
1151
- .bio-properties-panel-tooltip-content {
1152
- background-color: var(--tooltip-background-color);
1153
- padding: 16px;
1154
- border-radius: 2px;
1155
- font-weight: 400;
1156
- }
1157
-
1158
- .bio-properties-panel-tooltip-content code,
1159
- .bio-properties-panel-tooltip-content pre {
1160
- color: var(--description-color);
1161
- font-family: var(--font-family);
1162
- font-size: var(--text-size-small);
1163
- line-height: var(--line-height-condensed);
1164
- padding: 0 2px;
1165
- background-color: var(--tooltip-code-background-color);
1166
- border: 1px solid var(--tooltip-code-border-color);
1167
- border-radius: 3px;
1168
- }
1169
-
1170
- .bio-properties-panel-tooltip-content a {
1171
- color: var(--tooltip-link);
1172
- }
1173
-
1174
- .bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
1175
- width: 0;
1176
- height: 0;
1177
- border-top: 5px solid transparent;
1178
- border-bottom: 5px solid transparent;
1179
- border-left: 5px solid var(--tooltip-background-color);
1180
- margin-top: 16px;
1
+ /**
2
+ * Theming
3
+ */
4
+ .bio-properties-panel {
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
8
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
9
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
10
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
11
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
13
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
14
+ --color-grey-0-0-22: hsl(0, 0%, 22%);
15
+
16
+ --color-blue-205-100-35: hsl(205, 100%, 35%);
17
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
18
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
19
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
20
+ --color-blue-219-99-53: hsl(219, 99%, 53%);
21
+ --color-blue-218-100-74: hsl(218, 100%, 74%);
22
+ --color-green-150-86-44: hsl(150, 86%, 44%);
23
+
24
+ --color-red-360-100-40: hsl(360, 100%, 40%);
25
+ --color-red-360-100-45: hsl(360, 100%, 45%);
26
+ --color-red-360-100-92: hsl(360, 100%, 92%);
27
+ --color-red-360-100-97: hsl(360, 100%, 97%);
28
+
29
+ --color-white: white;
30
+ --color-black: black;
31
+ --color-transparent: transparent;
32
+
33
+ --text-base-color: var(--color-grey-225-10-15);
34
+ --text-error-color: var(--color-red-360-100-45);
35
+ --link-color: var(--color-blue-205-100-50);
36
+
37
+ --description-color: var(--color-grey-225-10-35);
38
+ --description-code-background-color: var(--color-grey-225-10-97);
39
+ --description-code-border-color: var(--color-grey-225-10-85);
40
+ --description-list-item-color: var(--color-grey-225-10-35);
41
+
42
+ --placeholder-color: var(--color-grey-225-10-35);
43
+ --placeholder-background-color: var(--color-grey-225-10-95);
44
+
45
+ --header-background-color: var(--color-grey-225-10-95);
46
+ --header-icon-fill-color: var(--color-grey-225-10-15);
47
+ --header-bottom-border-color: var(--color-grey-225-10-75);
48
+
49
+ --group-background-color: var(--color-white);
50
+ --group-bottom-border-color: var(--color-grey-225-10-75);
51
+
52
+ --sticky-group-background-color: var(--color-grey-225-10-95);
53
+ --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
54
+
55
+ --add-entry-fill-color: var(--color-grey-225-10-35);
56
+ --add-entry-hover-fill-color: var(--color-white);
57
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
58
+ --add-entry-label-color: var(--color-white);
59
+
60
+ --remove-entry-fill-color: var(--color-red-360-100-45);
61
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
62
+
63
+ --arrow-fill-color: var(--color-grey-225-10-35);
64
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
65
+
66
+ --dot-color: var(--color-grey-225-10-35);
67
+ --dot-color-error: var(--color-red-360-100-45);
68
+
69
+ --list-badge-color: var(--color-white);
70
+ --list-badge-background-color: var(--color-grey-225-10-35);
71
+
72
+ --input-background-color: var(--color-grey-225-10-97);
73
+ --input-border-color: var(--color-grey-225-10-75);
74
+
75
+ --input-focus-background-color: var(--color-blue-205-100-95);
76
+ --input-focus-border-color: var(--color-blue-205-100-50);
77
+
78
+ --input-error-background-color: var(--color-red-360-100-97);
79
+ --input-error-border-color: var(--color-red-360-100-45);
80
+ --input-error-focus-border-color: var(--color-red-360-100-45);
81
+
82
+ --input-disabled-color: var(--color-grey-225-10-55);
83
+ --input-disabled-background-color: var(--color-grey-225-10-97);
84
+ --input-disabled-border-color: var(--color-grey-225-10-90);
85
+
86
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
87
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
88
+ --toggle-switch-switcher-background-color: var(--color-white);
89
+
90
+ --side-line-background-color: var(--color-grey-225-10-35);
91
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
92
+
93
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
94
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
95
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
96
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
97
+ --list-entry-add-entry-label-color: var(--color-white);
98
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
99
+ --list-entry-add-entry-fill-color: var(--color-white);
100
+
101
+ --dropdown-item-background-color: var(--color-white);
102
+ --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
103
+ --dropdown-separator-background-color: var(--color-grey-225-10-75);
104
+
105
+ --feel-background-color: transparent;
106
+ --feel-active-color: var(--color-blue-205-100-45);
107
+ --feel-inactive-color: var(--color-grey-225-10-35);
108
+ --feel-hover-color: var(--color-grey-225-10-15);
109
+ --feel-hover-background-color: var(--color-grey-225-10-97);
110
+ --feel-active-background-color: transparent;
111
+ --feel-required-color: var(--color-grey-225-10-55);
112
+
113
+ --feel-indicator-background-color: var(--color-grey-225-10-90);
114
+
115
+ --tooltip-underline-color: var(--color-blue-219-99-53);
116
+ --tooltip-background-color: var(--color-grey-0-0-22);
117
+ --tooltip-link: var(--color-blue-218-100-74);
118
+ --tooltip-code-background-color: var(--color-grey-225-10-97);
119
+ --tooltip-code-border-color: var(--color-grey-225-10-85);
120
+
121
+ --text-size-base: 14px;
122
+ --text-size-small: 13px;
123
+ --text-size-smallest: 12px;
124
+ --text-line-height: 21px;
125
+ --line-height-condensed: 17px;
126
+
127
+ --font-family: sans-serif;
128
+ --font-family-monospace: monospace;
129
+
130
+ display: flex;
131
+ flex-direction: column;
132
+ flex: 1;
133
+ position: relative;
134
+ height: 100%;
135
+ width: 100%;
136
+ overflow: hidden;
137
+ }
138
+
139
+ .bio-properties-panel {
140
+ color: var(--text-base-color);
141
+ }
142
+
143
+ .bio-properties-panel * {
144
+ font-size: var(--text-size-base);
145
+ line-height: var(--text-line-height);
146
+ font-weight: 400;
147
+ box-sizing: border-box;
148
+ }
149
+
150
+ .bio-properties-panel {
151
+ font-family: var(--font-family);
152
+ }
153
+
154
+ /**
155
+ * Placeholder (empty, multi select, ...)
156
+ */
157
+ .bio-properties-panel-placeholder {
158
+ position: absolute;
159
+ display: flex;
160
+ flex-direction: column;
161
+ justify-content: center;
162
+ align-items: center;
163
+ top: 0;
164
+ right: 0;
165
+ bottom: 0;
166
+ left: 0;
167
+ background-color: var(--placeholder-background-color);
168
+ }
169
+
170
+ .bio-properties-panel-placeholder-text {
171
+ color: var(--placeholder-color);
172
+ font-size: var(--text-size-base);
173
+ text-align: center;
174
+ margin: 12px 48px;
175
+ }
176
+
177
+ /**
178
+ * Header
179
+ */
180
+ .bio-properties-panel-header {
181
+ display: flex;
182
+ flex-direction: row;
183
+ align-items: center;
184
+ font-size: var(--text-size-base);
185
+ padding: 16px 10px;
186
+ background-color: var(--header-background-color);
187
+ border-bottom: 1px solid var(--header-bottom-border-color);
188
+ width: 100%;
189
+ z-index: 10;
190
+ max-height: 64px;
191
+ overflow: hidden;
192
+ }
193
+
194
+ .bio-properties-panel-header-icon {
195
+ fill: var(--header-icon-fill-color);
196
+ display: flex;
197
+ flex-direction: row;
198
+ align-items: center;
199
+ justify-content: center;
200
+ width: 32px;
201
+ height: 32px;
202
+ }
203
+
204
+ .bio-properties-panel-header-labels {
205
+ overflow: hidden;
206
+ margin-left: 12px;
207
+ user-select: none;
208
+ }
209
+
210
+ .bio-properties-panel-header-type {
211
+ font-size: var(--text-size-smallest);
212
+ font-weight: 600;
213
+ white-space: nowrap;
214
+ text-overflow: ellipsis;
215
+ overflow: hidden;
216
+ text-transform: uppercase;
217
+ }
218
+
219
+ .bio-properties-panel-header-label {
220
+ white-space: nowrap;
221
+ text-overflow: ellipsis;
222
+ overflow: hidden;
223
+ margin-top: -6px;
224
+ }
225
+
226
+ .bio-properties-panel-header-actions {
227
+ margin-left: auto;
228
+ margin-top: auto;
229
+ }
230
+
231
+ /**
232
+ * Scroll container
233
+ */
234
+ .bio-properties-panel-scroll-container {
235
+ overflow-y: auto;
236
+ overflow-x: hidden;
237
+ flex: 1;
238
+ }
239
+
240
+ /**
241
+ * Groups
242
+ */
243
+ .bio-properties-panel-group {
244
+ background-color: var(--group-background-color);
245
+ border-bottom: 1px solid var(--group-bottom-border-color);
246
+ position: relative;
247
+ }
248
+
249
+ .bio-properties-panel-group-header {
250
+ display: flex;
251
+ flex-direction: row;
252
+ align-items: center;
253
+ font-size: var(--text-size-base);
254
+ height: 32px;
255
+ user-select: none;
256
+ justify-content: space-between;
257
+ margin-bottom: -1px; /* avoid double borders */
258
+ position: relative; /* browsers not supporting sticky */
259
+ position: -webkit-sticky; /* for safari */
260
+ position: sticky;
261
+ top: 0;
262
+ z-index: 10;
263
+ }
264
+
265
+ .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
266
+ white-space: nowrap;
267
+ overflow: hidden;
268
+ text-overflow: ellipsis;
269
+ margin: 1px 12px 0;
270
+ }
271
+
272
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
273
+ font-weight: 500;
274
+ }
275
+
276
+ .bio-properties-panel-group-header.sticky {
277
+ background-color: var(--sticky-group-background-color);
278
+ border-bottom: 1px solid var(--sticky-group-bottom-border-color);
279
+ }
280
+
281
+ .bio-properties-panel-group-header-buttons {
282
+ display: flex;
283
+ }
284
+
285
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
286
+ display: inline-flex;
287
+ justify-content: center;
288
+ align-items: center;
289
+ align-self: center;
290
+ height: 22px;
291
+ line-height: 22px;
292
+ min-width: 22px;
293
+ margin: 5px;
294
+ padding: 0 3px;
295
+ border: none;
296
+ background: none;
297
+ }
298
+
299
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
300
+ margin-right: 0;
301
+ }
302
+
303
+ .bio-properties-panel-add-entry {
304
+ fill: var(--add-entry-fill-color);
305
+ border-radius: 11px;
306
+ }
307
+
308
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
309
+ margin-right: 69px;
310
+ }
311
+
312
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
313
+ margin-right: 19px;
314
+ }
315
+
316
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
317
+ display: none;
318
+ color: var(--add-entry-label-color);
319
+ padding: 0 6px 0 2px;
320
+ }
321
+
322
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
323
+ background-color: var(--add-entry-hover-background-color);
324
+ fill: var(--add-entry-hover-fill-color);
325
+ }
326
+
327
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
328
+ display: block;
329
+ }
330
+
331
+ .bio-properties-panel-group-entries {
332
+ display: none;
333
+ }
334
+
335
+ .bio-properties-panel-group-entries.open {
336
+ display: block;
337
+ }
338
+
339
+ .bio-properties-panel-arrow {
340
+ display: flex;
341
+ justify-content: center;
342
+ text-align: center;
343
+ fill: var(--arrow-fill-color);
344
+ min-width: 22px;
345
+ border-radius: 11px;
346
+ border: none;
347
+ background: none;
348
+ }
349
+
350
+ .bio-properties-panel-arrow:hover {
351
+ background-color: var(--arrow-hover-background-color);
352
+ }
353
+
354
+ .bio-properties-panel-arrow-down {
355
+ transform: rotate(90deg);
356
+ }
357
+
358
+ .bio-properties-panel-dot {
359
+ align-self: center;
360
+ height: 8px;
361
+ min-width: 8px;
362
+ border-radius: 50%;
363
+ margin: 12px;
364
+ background-color: var(--dot-color);
365
+ }
366
+
367
+ .bio-properties-panel-dot--error {
368
+ --dot-color: var(--dot-color-error);
369
+ }
370
+
371
+ /**
372
+ * Lists
373
+ */
374
+ .bio-properties-panel-list {
375
+ display: none;
376
+ }
377
+
378
+ .bio-properties-panel-list.open {
379
+ display: block;
380
+ margin-bottom: 6px;
381
+ padding-bottom: 2px;
382
+ }
383
+
384
+ .bio-properties-panel-list-badge {
385
+ height: 22px;
386
+ min-width: 22px;
387
+ color: var(--list-badge-color);
388
+ border-radius: 11px;
389
+ font-size: var(--text-size-small);
390
+ line-height: 22px;
391
+ text-align: center;
392
+ user-select: none;
393
+ padding: 0 5px;
394
+ margin: 5px;
395
+ background-color: var(--list-badge-background-color);
396
+ }
397
+
398
+ .bio-properties-panel-list-badge--error {
399
+ --list-badge-background-color: var(--dot-color-error);
400
+ }
401
+
402
+ /**
403
+ * Basic entries
404
+ */
405
+ .bio-properties-panel-entry {
406
+ margin: 2px 32px 6px 12px;
407
+ }
408
+
409
+ .bio-properties-panel-entry:last-child {
410
+ padding-bottom: 10px;
411
+ }
412
+
413
+ .bio-properties-panel-label {
414
+ display: block;
415
+ font-size: var(--text-size-small);
416
+ margin: 2px 0 1px;
417
+ }
418
+
419
+ .bio-properties-panel-description,
420
+ .bio-properties-panel-description p,
421
+ .bio-properties-panel-description span,
422
+ .bio-properties-panel-description div {
423
+ color: var(--description-color);
424
+ display: block;
425
+ margin: 2px 0 4px;
426
+ line-height: var(--line-height-condensed);
427
+ font-weight: 400;
428
+ font-size: var(--text-size-small);
429
+ }
430
+
431
+ .bio-properties-panel-description code {
432
+ color: var(--description-color);
433
+ font-family: var(--font-family);
434
+ font-size: var(--text-size-small);
435
+ line-height: var(--line-height-condensed);
436
+ padding: 0 2px;
437
+ background-color: var(--description-code-background-color);
438
+ border: 1px solid var(--description-code-border-color);
439
+ border-radius: 3px;
440
+ }
441
+
442
+ .bio-properties-panel-description pre code {
443
+ width: 100%;
444
+ display: block;
445
+ overflow-x: auto;
446
+ padding: 4px 6px;
447
+ font-family: var(--font-family-monospace);
448
+ }
449
+
450
+ .bio-properties-panel-description ul {
451
+ padding: 0;
452
+ margin: 0 0 0 12px;
453
+ list-style-type: disc;
454
+ }
455
+
456
+ .bio-properties-panel-description li {
457
+ color: var(--description-list-item-color);
458
+ margin: 0 0 0 12px;
459
+ }
460
+
461
+ .bio-properties-panel-description a {
462
+ color: var(--link-color);
463
+ font-size: var(--text-size-small);
464
+ text-decoration: underline;
465
+ }
466
+
467
+ .bio-properties-panel-feelers-editor.bio-properties-panel-input {
468
+ padding: 0;
469
+ }
470
+
471
+ .bio-properties-panel-feelers-input .cm-editor
472
+ {
473
+ min-height: 32px;
474
+ max-height: 215px;
475
+ background-color: transparent;
476
+ }
477
+
478
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused,
479
+ .bio-properties-panel-feelers-input .cm-editor.cm-focused {
480
+ outline: none;
481
+ }
482
+
483
+ .bio-properties-panel-input {
484
+ padding: 3px 6px 2px;
485
+ border: 1px solid var(--input-border-color);
486
+ border-radius: 2px;
487
+ background-color: var(--input-background-color);
488
+ font-size: var(--text-size-base);
489
+ font-family: inherit;
490
+ }
491
+
492
+ .bio-properties-panel-input[type=number],
493
+ select.bio-properties-panel-input,
494
+ textarea.bio-properties-panel-input,
495
+ .bio-properties-panel-input[type=text] {
496
+ display: block;
497
+ width: 100%;
498
+ }
499
+
500
+ textarea.bio-properties-panel-input {
501
+ min-height: 28px;
502
+ }
503
+
504
+ .bio-properties-panel-input:focus,
505
+ .bio-properties-panel-input:focus-within {
506
+ outline: none;
507
+ background-color: var(--input-focus-background-color);
508
+ border: 1px solid var(--input-focus-border-color);
509
+ }
510
+
511
+ .bio-properties-panel-textfield:focus-within,
512
+ .bio-properties-panel-feel-entry:focus-within {
513
+ --input-background-color: var(--input-focus-background-color);
514
+ --input-border-color: var(--input-focus-border-color);
515
+ }
516
+
517
+ .bio-properties-panel-input:disabled {
518
+ border-color: var(--input-disabled-border-color);
519
+ background-color: var(--input-disabled-background-color);
520
+ color: var(--input-disabled-color);
521
+ }
522
+
523
+ select.bio-properties-panel-input {
524
+ padding: 4px 6px;
525
+ }
526
+
527
+ .bio-properties-panel-input-monospace {
528
+ font-family: var(--font-family-monospace);
529
+ }
530
+
531
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
532
+ margin: 0;
533
+ vertical-align: middle;
534
+ }
535
+
536
+ .bio-properties-panel-input[type="checkbox"]:focus {
537
+ outline: 2px solid var(--input-focus-border-color);
538
+ outline-offset: 0;
539
+ }
540
+
541
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
542
+ display: inline-block;
543
+ font-size: var(--text-size-base);
544
+ margin-left: 6px;
545
+ margin-top: auto;
546
+ vertical-align: middle;
547
+ }
548
+
549
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
550
+ margin-top: -8px;
551
+ }
552
+
553
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
554
+ margin-left: 18px;
555
+ }
556
+
557
+ textarea.bio-properties-panel-input {
558
+ resize: vertical;
559
+ }
560
+
561
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input {
562
+ border-color: var(--input-error-border-color);
563
+ background-color: var(--input-error-background-color);
564
+ }
565
+
566
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
567
+ border-color: var(--input-error-border-color);
568
+ }
569
+
570
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
571
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
572
+ border-color: var(--input-error-focus-border-color);
573
+ }
574
+
575
+ .bio-properties-panel-entry .bio-properties-panel-error {
576
+ color: var(--text-error-color);
577
+ margin: 4px 0;
578
+ font-size: var(--text-size-small);
579
+ }
580
+
581
+ .bio-properties-panel-simple {
582
+ width: 100%;
583
+ margin-right: 8px;
584
+ }
585
+
586
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
587
+ margin: auto;
588
+ }
589
+
590
+ /**
591
+ * Toggle Switch
592
+ */
593
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
594
+ margin-top: -8px;
595
+ }
596
+
597
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
598
+ margin-left: 38px;
599
+ }
600
+
601
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
602
+ display: flex;
603
+ flex-direction: row;
604
+ align-items: center;
605
+ }
606
+
607
+ .bio-properties-panel-toggle-switch.inline {
608
+ display: flex;
609
+ flex-direction: row;
610
+ }
611
+
612
+ .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
613
+ margin-left: auto;
614
+ }
615
+
616
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
617
+ font-size: var(--text-size-base);
618
+ }
619
+
620
+ .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
621
+ font-size: var(--text-size-small);
622
+ }
623
+
624
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
625
+ margin: 0;
626
+ margin-left: 6px;
627
+ font-size: var(--text-size-base);
628
+ }
629
+
630
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
631
+ position: relative;
632
+ width: 32px;
633
+ height: 16px;
634
+ }
635
+
636
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
637
+ outline: 2px solid var(--input-focus-border-color);
638
+ outline-offset: 1px;
639
+ }
640
+
641
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
642
+ opacity: 0;
643
+ width: 0;
644
+ height: 0;
645
+ }
646
+
647
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
648
+ position: absolute;
649
+ cursor: pointer;
650
+ top: 0;
651
+ left: 0;
652
+ right: 0;
653
+ bottom: 0;
654
+ background-color: var(--toggle-switch-off-background-color);
655
+ -webkit-transition: 0.4s;
656
+ transition: 0.4s;
657
+ border-radius: 34px;
658
+ }
659
+
660
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
661
+ position: absolute;
662
+ content: "";
663
+ height: 12px;
664
+ width: 12px;
665
+ left: 2px;
666
+ bottom: 2px;
667
+ background-color: var(--toggle-switch-switcher-background-color);
668
+ -webkit-transition: 0.4s;
669
+ transition: 0.4s;
670
+ border-radius: 50%;
671
+ }
672
+
673
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
674
+ background-color: var(--toggle-switch-on-background-color);
675
+ box-shadow: 0 0 1px ;
676
+ }
677
+
678
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
679
+ -webkit-transform: translateX(16px);
680
+ -ms-transform: translateX(16px);
681
+ transform: translateX(16px);
682
+ }
683
+
684
+ /**
685
+ * Collapsible entries
686
+ */
687
+ .bio-properties-panel-collapsible-entry-entries {
688
+ position: relative;
689
+ display: none;
690
+ }
691
+
692
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
693
+ padding-bottom: 0;
694
+ }
695
+
696
+ .bio-properties-panel-collapsible-entry-entries.open {
697
+ display: block;
698
+ }
699
+
700
+ .bio-properties-panel-collapsible-entry-entries {
701
+ padding-left: 20px;
702
+ margin-bottom: 10px;
703
+ position: relative;
704
+ display: none;
705
+ }
706
+
707
+ .bio-properties-panel-collapsible-entry-header {
708
+ position: relative;
709
+ display: flex;
710
+ justify-content: space-between;
711
+ align-items: center;
712
+ overflow: hidden;
713
+ }
714
+
715
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
716
+ padding: 2px 24px 2px 32px;
717
+ font-size: var(--text-size-base);
718
+ white-space: nowrap;
719
+ overflow: hidden;
720
+ text-overflow: ellipsis;
721
+ user-select: none;
722
+ }
723
+
724
+ .bio-properties-panel-collapsible-entry-arrow {
725
+ position: absolute;
726
+ top: 2px;
727
+ left: 6px;
728
+ padding: 0 3px;
729
+ height: 22px;
730
+ display: inline-flex;
731
+ justify-content: center;
732
+ align-items: center;
733
+ align-self: center;
734
+ }
735
+
736
+ .bio-properties-panel-remove-entry {
737
+ display: flex;
738
+ align-items: center;
739
+ justify-content: center;
740
+ margin-right: 5px;
741
+ padding: 0;
742
+ width: 22px;
743
+ height: 22px;
744
+ fill: var(--remove-entry-fill-color);
745
+ border-radius: 50%;
746
+ border: none;
747
+ background: none;
748
+ visibility: hidden;
749
+ }
750
+
751
+ .bio-properties-panel-remove-entry:hover {
752
+ background-color: var(--remove-entry-hover-background-color);
753
+ }
754
+
755
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
756
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
757
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
758
+ {
759
+ visibility: visible;
760
+ }
761
+
762
+ /* Side line */
763
+ .bio-properties-panel-collapsible-entry-entries::before {
764
+ content: "";
765
+ position: absolute;
766
+ left: 16px;
767
+ width: 2px;
768
+ top: -6px;
769
+ bottom: 12px;
770
+ background-color: var(--side-line-background-color);
771
+ border-radius: 1px;
772
+ }
773
+
774
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
775
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
776
+ .bio-properties-panel-list-entry.open:last-child {
777
+ position: relative;
778
+ }
779
+
780
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
781
+ .bio-properties-panel-list-entry.open:last-child::after {
782
+ content: "";
783
+ position: absolute;
784
+ left: -16px;
785
+ width: 2px;
786
+ top: 0;
787
+ bottom: -4px;
788
+ background-color: var(--side-line-extension-background-color);
789
+ border-radius: 1px;
790
+ }
791
+
792
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
793
+ left: -18px;
794
+ }
795
+
796
+ /*
797
+ * List entry
798
+ */
799
+ .bio-properties-panel-list-entry {
800
+ position: relative;
801
+ margin-right: 5px;
802
+ margin-bottom: 0;
803
+ }
804
+
805
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
806
+ margin-right: 0;
807
+ }
808
+
809
+ .bio-properties-panel-list-entry-header {
810
+ position: relative;
811
+ overflow: hidden;
812
+ display: flex;
813
+ justify-content: space-between;
814
+ height: 32px;
815
+ }
816
+
817
+ /* Nested list dot */
818
+ .bio-properties-panel-list-entry::before {
819
+ content: "";
820
+ width: 8px;
821
+ height: 8px;
822
+ position: absolute;
823
+ left: -19px;
824
+ top: 13px;
825
+ border-radius: 50%;
826
+ background-color: var(--list-entry-dot-background-color);
827
+ }
828
+
829
+ .bio-properties-panel-list-entry-header-title {
830
+ display: block;
831
+ margin: auto 0;
832
+ padding: 2px 0;
833
+ font-size: var(--text-size-base);
834
+ white-space: nowrap;
835
+ overflow: hidden;
836
+ text-overflow: ellipsis;
837
+ }
838
+
839
+ .bio-properties-panel-list-entry-header-title.open {
840
+ font-weight: 500;
841
+ }
842
+
843
+ .bio-properties-panel-list-entry-header-buttons {
844
+ display: flex;
845
+ align-items: center;
846
+ }
847
+
848
+ .bio-properties-panel-list-entry-header-buttons > button {
849
+ display: inline-flex;
850
+ justify-content: center;
851
+ align-items: center;
852
+ align-self: center;
853
+ height: 22px;
854
+ line-height: 22px;
855
+ min-width: 22px;
856
+ margin: 5px;
857
+ padding: 0 3px;
858
+ border: none;
859
+ background: none;
860
+ fill: var(--list-entry-header-button-fill-color);
861
+ }
862
+
863
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
864
+ margin-right: 0;
865
+ }
866
+
867
+ .bio-properties-panel-list-entry-items {
868
+ padding: 0;
869
+ margin: 0;
870
+
871
+ list-style: none;
872
+ }
873
+
874
+ .bio-properties-panel-list-entry-items:not(.open) {
875
+ display: none;
876
+ }
877
+
878
+ .bio-properties-panel-list-entry-item {
879
+ display: flex;
880
+ justify-content: space-between;
881
+ }
882
+
883
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
884
+ margin-right: 1px;
885
+ }
886
+
887
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
888
+ width: 100%;
889
+ margin-right: 4px;
890
+ }
891
+
892
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
893
+ margin-left: -8px;
894
+ }
895
+
896
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
897
+ left: 2px;
898
+ }
899
+
900
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
901
+ padding-left: 30px;
902
+ }
903
+
904
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
905
+ padding-left: 10px;
906
+ }
907
+
908
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
909
+ left: 4px;
910
+ }
911
+
912
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
913
+ margin-right: 16px;
914
+ padding-left: 6px;
915
+ }
916
+
917
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
918
+ color: var(--list-entry-add-entry-label-color);
919
+ padding: 4px 6px 3px 2px;
920
+ }
921
+
922
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
923
+ background-color: var(--list-entry-add-entry-background-color);
924
+ fill: var(--list-entry-add-entry-fill-color);
925
+ }
926
+
927
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
928
+ border-radius: 0;
929
+ margin-bottom: -2px;
930
+ }
931
+
932
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
933
+ border-top-left-radius: 2px;
934
+ border-top-right-radius: 2px;
935
+ }
936
+
937
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
938
+ border-bottom-left-radius: 2px;
939
+ border-bottom-right-radius: 2px;
940
+ }
941
+
942
+ .bio-properties-panel-dropdown-button {
943
+ position: relative;
944
+
945
+ --dropdown-button-margin: 5px;
946
+ }
947
+
948
+ .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
949
+ display: none;
950
+ }
951
+
952
+ .bio-properties-panel-dropdown-button__menu {
953
+ min-width: calc(100% - var(--dropdown-button-margin) * 2);
954
+ max-width: 240px;
955
+
956
+ position: absolute;
957
+ top: calc(100% - var(--dropdown-button-margin));
958
+ right: var(--dropdown-button-margin);
959
+ z-index: 101;
960
+
961
+ background-color: var(--dropdown-item-background-color);
962
+
963
+ padding: 8px 0;
964
+
965
+ box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
966
+ }
967
+
968
+ .bio-properties-panel-dropdown-button__menu-item {
969
+ display: block;
970
+ width: 100%;
971
+ padding: 4px 12px;
972
+
973
+ font-size: var(--text-size-small);
974
+ appearance: revert;
975
+ border: unset;
976
+ background: unset;
977
+ text-align: unset;
978
+ }
979
+
980
+ .bio-properties-panel-dropdown-button__menu-item--separator {
981
+ width: 100%;
982
+ height: 1px;
983
+
984
+ padding: 0;
985
+ margin: 8px 0;
986
+
987
+ background-color: var(--dropdown-separator-background-color);
988
+ }
989
+
990
+ .bio-properties-panel-dropdown-button__menu-item--actionable {
991
+ font-size: var(--text-size-base);
992
+ }
993
+
994
+ .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
995
+ background-color: var(--dropdown-item-hover-background-color);
996
+ }
997
+
998
+ .bio-properties-panel-feel-input {
999
+ position: relative;
1000
+ }
1001
+
1002
+ .bio-properties-panel-feel-input input {
1003
+ padding-right: 2em
1004
+ }
1005
+
1006
+ .bio-properties-panel-feel-entry .bio-properties-panel-label {
1007
+ display: flex;
1008
+ }
1009
+
1010
+ .bio-properties-panel-feel-icon {
1011
+ display: inline-flex;
1012
+ height: 18px;
1013
+ width: 22px;
1014
+ vertical-align: text-bottom;
1015
+ padding: 0;
1016
+ margin: 0 3px;
1017
+ align-items: center;
1018
+ align-self: center;
1019
+ justify-content: center;
1020
+ border: none;
1021
+ background: none;
1022
+ border-radius: 3px;
1023
+ }
1024
+
1025
+ .bio-properties-panel-feel-icon.optional {
1026
+ cursor: pointer;
1027
+ background: var(--feel-background-color);
1028
+ }
1029
+
1030
+ .bio-properties-panel-feel-icon svg * {
1031
+ fill: var(--feel-inactive-color);
1032
+ }
1033
+
1034
+ .bio-properties-panel-feel-icon:hover {
1035
+ background: var(--feel-hover-background-color);
1036
+ }
1037
+
1038
+ .bio-properties-panel-feel-icon:hover svg * {
1039
+ fill: var(--feel-hover-color);
1040
+ }
1041
+
1042
+ .bio-properties-panel-feel-icon.active {
1043
+ background: var(--feel-active-background-color);
1044
+ }
1045
+
1046
+ .bio-properties-panel-feel-icon.active:hover {
1047
+ background: var(--feel-hover-background-color);
1048
+ }
1049
+
1050
+ .bio-properties-panel-feel-icon.required.active {
1051
+ background: none;
1052
+ }
1053
+
1054
+ .bio-properties-panel-feel-icon.active svg * {
1055
+ fill: var(--feel-active-color);
1056
+ }
1057
+
1058
+ .bio-properties-panel-feel-icon.required.active svg * {
1059
+ fill: var(--feel-required-color);
1060
+ }
1061
+
1062
+ .bio-properties-panel-feel-editor-container {
1063
+ position: relative;
1064
+ }
1065
+
1066
+ .bio-properties-panel-feel-editor-container.active {
1067
+ font-family: var(--font-family-monospace);
1068
+ }
1069
+
1070
+ .bio-properties-panel-feel-container {
1071
+ position: relative;
1072
+ }
1073
+
1074
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1075
+ position: static;
1076
+ padding-left: 2.4em !important;
1077
+ min-height: 28px;
1078
+ }
1079
+
1080
+ .bio-properties-panel-feel-indicator {
1081
+ position: absolute;
1082
+ border: 1px solid var(--input-border-color);
1083
+ background-color: var(--feel-indicator-background-color);
1084
+ border-right: 0px;
1085
+ border-radius: 2px 0 0 2px;
1086
+ z-index: 1;
1087
+ height: 100%;
1088
+ width: 2em;
1089
+ text-align: center;
1090
+ padding: 2px 6px;
1091
+ }
1092
+
1093
+ .bio-properties-panel-feel-editor-container .cm-scroller {
1094
+ overflow: hidden !important;
1095
+ }
1096
+
1097
+ .bio-properties-panel-feelers-editor .cm-editor {
1098
+ background-color: transparent;
1099
+ }
1100
+
1101
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1102
+ background-color: transparent;
1103
+ }
1104
+
1105
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1106
+ resize: vertical;
1107
+ overflow: hidden;
1108
+ overflow-y: auto;
1109
+ }
1110
+
1111
+ .bio-properties-panel-feel-editor-container,
1112
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1113
+ .bio-properties-panel-feel-container .cm-editor {
1114
+ min-height: 100%;
1115
+ }
1116
+
1117
+ .bio-properties-panel-feel-checkbox,
1118
+ .bio-properties-panel-feel-toggle-switch {
1119
+ padding-top: 1px;
1120
+ }
1121
+
1122
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1123
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1124
+ display: flex;
1125
+ flex-direction: row;
1126
+ align-items: center;
1127
+ }
1128
+
1129
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1130
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1131
+ margin-left: auto;
1132
+ }
1133
+
1134
+ .bio-properties-panel-tooltip-wrapper {
1135
+ text-decoration: underline;
1136
+ text-decoration-style: dotted;
1137
+ text-underline-offset: 2px;
1138
+ font: inherit;
1139
+ }
1140
+
1141
+ .bio-properties-panel-tooltip {
1142
+ display: flex;
1143
+ color: var(--color-white, white);
1144
+ position: fixed;
1145
+ z-index: 1000;
1146
+ padding-right: 6px;
1147
+ max-width: 300px;
1148
+ font-size: var(--text-size-small);
1149
+ font-family: var(--font-family);
1150
+ }
1151
+
1152
+ .bio-properties-panel-tooltip-content {
1153
+ background-color: var(--tooltip-background-color);
1154
+ padding: 16px;
1155
+ border-radius: 2px;
1156
+ font-weight: 400;
1157
+ white-space: pre-wrap;
1158
+ }
1159
+
1160
+ .bio-properties-panel-tooltip-content code,
1161
+ .bio-properties-panel-tooltip-content pre {
1162
+ color: var(--description-color);
1163
+ font-family: var(--font-family);
1164
+ font-size: var(--text-size-small);
1165
+ line-height: var(--line-height-condensed);
1166
+ padding: 0 2px;
1167
+ background-color: var(--tooltip-code-background-color);
1168
+ border: 1px solid var(--tooltip-code-border-color);
1169
+ border-radius: 3px;
1170
+ }
1171
+
1172
+ .bio-properties-panel-tooltip p:first-child {
1173
+ margin-top: 0;
1174
+ }
1175
+
1176
+ .bio-properties-panel-tooltip p:last-child {
1177
+ margin-bottom: 0;
1178
+ }
1179
+
1180
+ .bio-properties-panel-tooltip-content a {
1181
+ color: var(--tooltip-link);
1182
+ }
1183
+
1184
+ .bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
1185
+ width: 0;
1186
+ height: 0;
1187
+ border-top: 5px solid transparent;
1188
+ border-bottom: 5px solid transparent;
1189
+ border-left: 5px solid var(--tooltip-background-color);
1190
+ margin-top: 16px;
1181
1191
  }