1/** 2 * color definitions 3 */ 4.djs-container { 5 --blue-base-65: #4d90ff; 6 --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3); 7 --blue-darken-48: #005df7; 8 --blue-darken-55: #1a70ff; 9 --blue-lighten-82: #a2c5ff; 10 11 --red-base-62: #ff3d3d; 12 --red-base-62-lighten-90: rgb(255, 235, 235); 13 14 --silver-darken-94: #efefef; 15 16 --color-000000: #000000; 17 --color-000000-opacity-05: rgba(0, 0, 0, 0.05); 18 --color-000000-opacity-10: rgba(0, 0, 0, 0.1); 19 --color-333333: #333333; 20 --color-666666: #666666; 21 --color-aaaaaa: #aaaaaa; 22 --color-cccccc: #cccccc; 23 --color-cdcdcd: #cdcdcd; 24 --color-dddddd: #dddddd; 25 --color-f6f6f6: #f6f6f6; 26 --color-fafafa: #fafafa; 27 --color-fefefe: #fefefe; 28 --color-ffffff: #ffffff; 29 30 --bendpoint-fill-color: var(--blue-base-65-opacity-30); 31 --bendpoint-stroke-color: var(--blue-base-65); 32 33 --context-pad-entry-background-color: var(--color-fefefe); 34 --context-pad-entry-hover-background-color: var(--silver-darken-94); 35 36 --element-dragger-color: var(--blue-base-65); 37 --element-hover-outline-fill-color: var(--blue-darken-48); 38 --element-selected-outline-stroke-color: var(--blue-base-65); 39 40 --lasso-fill-color: var(--color-000000-opacity-05); 41 --lasso-stroke-color: var(--color-000000); 42 43 --palette-entry-color: var(--color-333333); 44 --palette-entry-hover-color: var(--blue-darken-48); 45 --palette-entry-selected-color: var(--blue-base-65); 46 --palette-separator-color: var(--color-aaaaaa); 47 --palette-toggle-hover-background-color: var(--color-666666); 48 --palette-background-color: var(--color-fafafa); 49 --palette-border-color: var(--color-cccccc); 50 51 --popup-body-background-color: var(--color-fefefe); 52 --popup-header-entry-selected-color: var(--blue-base-65); 53 --popup-header-entry-selected-background-color: var(--color-000000-opacity-10); 54 --popup-header-separator-color: var(--color-dddddd); 55 --popup-background-color: var(--color-fafafa); 56 --popup-border-color: var(--color-cccccc); 57 58 --resizer-fill-color: var(--blue-base-65-opacity-30); 59 --resizer-stroke-color: var(--blue-base-65); 60 61 --search-container-background-color: var(--color-fafafa); 62 --search-container-border-color: var(--blue-darken-55); 63 --search-container-box-shadow-color: var(--blue-lighten-82); 64 --search-container-box-shadow-inset-color: var(--color-cdcdcd); 65 --search-input-border-color: var(--color-cccccc); 66 --search-result-border-color: var(--color-aaaaaa); 67 --search-result-highlight-color: var(--color-000000); 68 --search-result-selected-color: var(--blue-base-65-opacity-30); 69 70 --shape-attach-allowed-stroke-color: var(--blue-base-65); 71 --shape-connect-allowed-fill-color: var(--color-f6f6f6); 72 --shape-drop-allowed-fill-color: var(--color-f6f6f6); 73 --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90); 74 --shape-resize-preview-stroke-color: var(--blue-base-65); 75 76 --snap-line-stroke-color: var(--blue-base-65-opacity-30); 77 78 --space-tool-crosshair-stroke-color: var(--color-000000); 79 80 --tooltip-error-background-color: var(--red-base-62-lighten-90); 81 --tooltip-error-border-color: var(--red-base-62); 82 --tooltip-error-color: var(--red-base-62); 83} 84 85/** 86 * outline styles 87 */ 88 89.djs-outline { 90 fill: none; 91 visibility: hidden; 92} 93 94.djs-element.hover .djs-outline, 95.djs-element.selected .djs-outline { 96 visibility: visible; 97 shape-rendering: geometricPrecision; 98 stroke-dasharray: 3,3; 99} 100 101.djs-element.selected .djs-outline { 102 stroke: var(--element-selected-outline-stroke-color); 103 stroke-width: 1px; 104} 105 106.djs-element.hover .djs-outline { 107 stroke: var(--element-hover-outline-fill-color); 108 stroke-width: 1px; 109} 110 111.djs-shape.connect-ok .djs-visual > :nth-child(1) { 112 fill: var(--shape-connect-allowed-fill-color) !important; 113} 114 115.djs-shape.connect-not-ok .djs-visual > :nth-child(1), 116.djs-shape.drop-not-ok .djs-visual > :nth-child(1) { 117 fill: var(--shape-drop-not-allowed-fill-color) !important; 118} 119 120.djs-shape.new-parent .djs-visual > :nth-child(1) { 121 fill: var(--shape-drop-allowed-fill-color) !important; 122} 123 124svg.drop-not-ok { 125 background: var(--shape-drop-not-allowed-fill-color) !important; 126} 127 128svg.new-parent { 129 background: var(--shape-drop-allowed-fill-color) !important; 130} 131 132.djs-connection.connect-ok .djs-visual > :nth-child(1), 133.djs-connection.drop-ok .djs-visual > :nth-child(1) { 134 stroke: var(--shape-drop-allowed-fill-color) !important; 135} 136 137.djs-connection.connect-not-ok .djs-visual > :nth-child(1), 138.djs-connection.drop-not-ok .djs-visual > :nth-child(1) { 139 stroke: var(--shape-drop-not-allowed-fill-color) !important; 140} 141 142.drop-not-ok, 143.connect-not-ok { 144 cursor: not-allowed; 145} 146 147.djs-element.attach-ok .djs-visual > :nth-child(1) { 148 stroke-width: 5px !important; 149 stroke: var(--shape-attach-allowed-stroke-color) !important; 150} 151 152.djs-frame.connect-not-ok .djs-visual > :nth-child(1), 153.djs-frame.drop-not-ok .djs-visual > :nth-child(1) { 154 stroke-width: 3px !important; 155 stroke: var(--shape-drop-not-allowed-fill-color) !important; 156 fill: none !important; 157} 158 159/** 160* Selection box style 161* 162*/ 163.djs-lasso-overlay { 164 fill: var(--lasso-fill-color); 165 166 stroke-dasharray: 5 1 3 1; 167 stroke: var(--lasso-stroke-color); 168 169 shape-rendering: geometricPrecision; 170 pointer-events: none; 171} 172 173/** 174 * Resize styles 175 */ 176.djs-resize-overlay { 177 fill: none; 178 179 stroke-dasharray: 5 1 3 1; 180 stroke: var(--shape-resize-preview-stroke-color); 181 182 pointer-events: none; 183} 184 185.djs-resizer-hit { 186 fill: none; 187 pointer-events: all; 188} 189 190.djs-resizer-visual { 191 fill: var(--resizer-fill-color); 192 stroke-width: 1px; 193 stroke-opacity: 0.5; 194 stroke: var(--resizer-stroke-color); 195 shape-rendering: geometricprecision; 196} 197 198.djs-resizer:hover .djs-resizer-visual { 199 stroke: var(--resizer-stroke-color); 200 stroke-opacity: 1; 201} 202 203.djs-cursor-resize-ns, 204.djs-resizer-n, 205.djs-resizer-s { 206 cursor: ns-resize; 207} 208 209.djs-cursor-resize-ew, 210.djs-resizer-e, 211.djs-resizer-w { 212 cursor: ew-resize; 213} 214 215.djs-cursor-resize-nwse, 216.djs-resizer-nw, 217.djs-resizer-se { 218 cursor: nwse-resize; 219} 220 221.djs-cursor-resize-nesw, 222.djs-resizer-ne, 223.djs-resizer-sw { 224 cursor: nesw-resize; 225} 226 227.djs-shape.djs-resizing > .djs-outline { 228 visibility: hidden !important; 229} 230 231.djs-shape.djs-resizing > .djs-resizer { 232 visibility: hidden; 233} 234 235.djs-dragger > .djs-resizer { 236 visibility: hidden; 237} 238 239/** 240 * drag styles 241 */ 242.djs-dragger * { 243 fill: none !important; 244 stroke: var(--element-dragger-color) !important; 245} 246 247.djs-dragger tspan, 248.djs-dragger text { 249 fill: var(--element-dragger-color) !important; 250 stroke: none !important; 251} 252 253marker.djs-dragger circle, 254marker.djs-dragger path, 255marker.djs-dragger polygon, 256marker.djs-dragger polyline, 257marker.djs-dragger rect { 258 fill: var(--element-dragger-color) !important; 259 stroke: none !important; 260} 261 262marker.djs-dragger text, 263marker.djs-dragger tspan { 264 fill: none !important; 265 stroke: var(--element-dragger-color) !important; 266} 267 268.djs-dragging { 269 opacity: 0.3; 270} 271 272.djs-dragging, 273.djs-dragging > * { 274 pointer-events: none !important; 275} 276 277.djs-dragging .djs-context-pad, 278.djs-dragging .djs-outline { 279 display: none !important; 280} 281 282/** 283 * no pointer events for visual 284 */ 285.djs-visual, 286.djs-outline { 287 pointer-events: none; 288} 289 290.djs-element.attach-ok .djs-hit { 291 stroke-width: 60px !important; 292} 293 294/** 295 * all pointer events for hit shape 296 */ 297.djs-element > .djs-hit-all { 298 pointer-events: all; 299} 300 301.djs-element > .djs-hit-stroke, 302.djs-element > .djs-hit-click-stroke { 303 pointer-events: stroke; 304} 305 306/** 307 * all pointer events for hit shape 308 */ 309.djs-drag-active .djs-element > .djs-hit-click-stroke { 310 pointer-events: all; 311} 312 313/** 314 * shape / connection basic styles 315 */ 316.djs-connection .djs-visual { 317 stroke-width: 2px; 318 fill: none; 319} 320 321.djs-cursor-grab { 322 cursor: -webkit-grab; 323 cursor: -moz-grab; 324 cursor: grab; 325} 326 327.djs-cursor-grabbing { 328 cursor: -webkit-grabbing; 329 cursor: -moz-grabbing; 330 cursor: grabbing; 331} 332 333.djs-cursor-crosshair { 334 cursor: crosshair; 335} 336 337.djs-cursor-move { 338 cursor: move; 339} 340 341.djs-cursor-resize-ns { 342 cursor: ns-resize; 343} 344 345.djs-cursor-resize-ew { 346 cursor: ew-resize; 347} 348 349 350/** 351 * snapping 352 */ 353.djs-snap-line { 354 stroke: var(--snap-line-stroke-color); 355 stroke-linecap: round; 356 stroke-width: 2px; 357 pointer-events: none; 358} 359 360/** 361 * snapping 362 */ 363.djs-crosshair { 364 stroke: var(--space-tool-crosshair-stroke-color); 365 stroke-linecap: round; 366 stroke-width: 1px; 367 pointer-events: none; 368 shape-rendering: crispEdges; 369 stroke-dasharray: 5, 5; 370} 371 372/** 373 * palette 374 */ 375 376.djs-palette { 377 position: absolute; 378 left: 20px; 379 top: 20px; 380 381 box-sizing: border-box; 382 width: 48px; 383} 384 385.djs-palette .separator { 386 margin: 0 5px; 387 padding-top: 5px; 388 389 border: none; 390 border-bottom: solid 1px var(--palette-separator-color); 391 392 clear: both; 393} 394 395.djs-palette .entry:before { 396 vertical-align: text-bottom; 397} 398 399.djs-palette .djs-palette-toggle { 400 cursor: pointer; 401} 402 403.djs-palette .entry, 404.djs-palette .djs-palette-toggle { 405 color: var(--palette-entry-color); 406 font-size: 30px; 407 408 text-align: center; 409} 410 411.djs-palette .entry { 412 float: left; 413} 414 415.djs-palette .entry img { 416 max-width: 100%; 417} 418 419.djs-palette .djs-palette-entries:after { 420 content: ''; 421 display: table; 422 clear: both; 423} 424 425.djs-palette .djs-palette-toggle:hover { 426 background: var(--palette-toggle-hover-background-color); 427} 428 429.djs-palette .entry:hover { 430 color: var(--palette-entry-hover-color); 431} 432 433.djs-palette .highlighted-entry { 434 color: var(--palette-entry-selected-color) !important; 435} 436 437.djs-palette .entry, 438.djs-palette .djs-palette-toggle { 439 width: 46px; 440 height: 46px; 441 line-height: 46px; 442 cursor: default; 443} 444 445/** 446 * Palette open / two-column layout is controlled via 447 * classes on the palette. Events to hook into palette 448 * changed life-cycle are available in addition. 449 */ 450.djs-palette.two-column.open { 451 width: 94px; 452} 453 454.djs-palette:not(.open) .djs-palette-entries { 455 display: none; 456} 457 458.djs-palette:not(.open) { 459 overflow: hidden; 460} 461 462.djs-palette.open .djs-palette-toggle { 463 display: none; 464} 465 466/** 467 * context-pad 468 */ 469.djs-overlay-context-pad { 470 width: 72px; 471} 472 473.djs-context-pad { 474 position: absolute; 475 display: none; 476 pointer-events: none; 477} 478 479.djs-context-pad .entry { 480 width: 22px; 481 height: 22px; 482 text-align: center; 483 display: inline-block; 484 font-size: 22px; 485 margin: 0 2px 2px 0; 486 487 border-radius: 3px; 488 489 cursor: default; 490 491 background-color: var(--context-pad-entry-background-color); 492 box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color); 493 pointer-events: all; 494} 495 496.djs-context-pad .entry:before { 497 vertical-align: top; 498} 499 500.djs-context-pad .entry:hover { 501 background: var(--context-pad-entry-hover-background-color); 502} 503 504.djs-context-pad.open { 505 display: block; 506} 507 508/** 509 * popup styles 510 */ 511.djs-popup .entry { 512 line-height: 20px; 513 white-space: nowrap; 514 cursor: default; 515} 516 517/* larger font for prefixed icons */ 518.djs-popup .entry:before { 519 vertical-align: middle; 520 font-size: 20px; 521} 522 523.djs-popup .entry > span { 524 vertical-align: middle; 525 font-size: 14px; 526} 527 528.djs-popup .entry:hover, 529.djs-popup .entry.active:hover { 530 background: var(--popup-header-entry-selected-background-color); 531} 532 533.djs-popup .entry.disabled { 534 background: inherit; 535} 536 537.djs-popup .djs-popup-header .entry { 538 display: inline-block; 539 padding: 2px 3px 2px 3px; 540 541 border: solid 1px transparent; 542 border-radius: 3px; 543} 544 545.djs-popup .djs-popup-header .entry.active { 546 color: var(--popup-header-entry-selected-color); 547 border: solid 1px var(--popup-header-entry-selected-color); 548 background-color: var(--popup-header-entry-selected-background-color); 549} 550 551.djs-popup-body .entry { 552 padding: 4px 10px 4px 5px; 553} 554 555.djs-popup-body .entry > span { 556 margin-left: 5px; 557} 558 559.djs-popup-body { 560 background-color: var(--popup-body-background-color); 561} 562 563.djs-popup-header { 564 border-bottom: 1px solid var(--popup-header-separator-color); 565} 566 567.djs-popup-header .entry { 568 margin: 1px; 569 margin-left: 3px; 570} 571 572.djs-popup-header .entry:last-child { 573 margin-right: 3px; 574} 575 576/** 577 * popup / palette styles 578 */ 579.djs-palette { 580 background: var(--palette-background-color); 581 border: solid 1px var(--palette-border-color); 582 border-radius: 2px; 583} 584 585.djs-popup { 586 background: var(--popup-background-color); 587 border: solid 1px var(--popup-border-color); 588 border-radius: 2px; 589} 590 591/** 592 * touch 593 */ 594 595.djs-shape, 596.djs-connection { 597 touch-action: none; 598} 599 600.djs-segment-dragger, 601.djs-bendpoint { 602 display: none; 603} 604 605/** 606 * bendpoints 607 */ 608.djs-segment-dragger .djs-visual { 609 display: none; 610 611 fill: var(--bendpoint-fill-color); 612 stroke: var(--bendpoint-stroke-color); 613 stroke-width: 1px; 614 stroke-opacity: 1; 615} 616 617.djs-segment-dragger:hover .djs-visual { 618 display: block; 619} 620 621.djs-bendpoint .djs-visual { 622 fill: var(--bendpoint-fill-color); 623 stroke: var(--bendpoint-stroke-color); 624 stroke-width: 1px; 625 stroke-opacity: 0.5; 626} 627 628.djs-segment-dragger:hover, 629.djs-bendpoints.hover .djs-segment-dragger, 630.djs-bendpoints.selected .djs-segment-dragger, 631.djs-bendpoint:hover, 632.djs-bendpoints.hover .djs-bendpoint, 633.djs-bendpoints.selected .djs-bendpoint { 634 display: block; 635} 636 637.djs-drag-active .djs-bendpoints * { 638 display: none; 639} 640 641.djs-bendpoints:not(.hover) .floating { 642 display: none; 643} 644 645.djs-segment-dragger:hover .djs-visual, 646.djs-segment-dragger.djs-dragging .djs-visual, 647.djs-bendpoint:hover .djs-visual, 648.djs-bendpoint.floating .djs-visual { 649 fill: var(--bendpoint-fill-color); 650 stroke: var(--bendpoint-stroke-color); 651 stroke-opacity: 1; 652} 653 654.djs-bendpoint.floating .djs-hit { 655 pointer-events: none; 656} 657 658.djs-segment-dragger .djs-hit, 659.djs-bendpoint .djs-hit { 660 fill: none; 661 pointer-events: all; 662} 663 664.djs-segment-dragger.horizontal .djs-hit { 665 cursor: ns-resize; 666} 667 668.djs-segment-dragger.vertical .djs-hit { 669 cursor: ew-resize; 670} 671 672.djs-segment-dragger.djs-dragging .djs-hit { 673 pointer-events: none; 674} 675 676.djs-updating, 677.djs-updating > * { 678 pointer-events: none !important; 679} 680 681.djs-updating .djs-context-pad, 682.djs-updating .djs-outline, 683.djs-updating .djs-bendpoint, 684.connect-ok .djs-bendpoint, 685.connect-not-ok .djs-bendpoint, 686.drop-ok .djs-bendpoint, 687.drop-not-ok .djs-bendpoint { 688 display: none !important; 689} 690 691.djs-segment-dragger.djs-dragging, 692.djs-bendpoint.djs-dragging { 693 display: block; 694 opacity: 1.0; 695} 696 697 698/** 699 * tooltips 700 */ 701.djs-tooltip-error { 702 width: 160px; 703 padding: 6px; 704 705 background: var(--tooltip-error-background-color); 706 border: solid 1px var(--tooltip-error-border-color); 707 border-radius: 2px; 708 color: var(--tooltip-error-color); 709 font-size: 12px; 710 line-height: 16px; 711 712 opacity: 0.75; 713} 714 715.djs-tooltip-error:hover { 716 opacity: 1; 717} 718 719 720/** 721 * search pad 722 */ 723.djs-search-container { 724 position: absolute; 725 top: 20px; 726 left: 0; 727 right: 0; 728 margin-left: auto; 729 margin-right: auto; 730 731 width: 25%; 732 min-width: 300px; 733 max-width: 400px; 734 z-index: 10; 735 736 font-size: 1.05em; 737 opacity: 0.9; 738 background: var(--search-container-background-color); 739 border: solid 1px var(--search-container-border-color); 740 border-radius: 2px; 741 box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset; 742} 743 744.djs-search-container:not(.open) { 745 display: none; 746} 747 748.djs-search-input input { 749 font-size: 1.05em; 750 width: 100%; 751 padding: 6px 10px; 752 border: 1px solid var(--search-input-border-color); 753} 754 755.djs-search-input input:focus { 756 outline: none; 757 border-color: var(--search-input-border-color); 758} 759 760.djs-search-results { 761 position: relative; 762 overflow-y: auto; 763 max-height: 200px; 764} 765 766.djs-search-results:hover { 767 cursor: pointer; 768} 769 770.djs-search-result { 771 width: 100%; 772 padding: 6px 10px; 773 background: white; 774 border-bottom: solid 1px var(--search-result-border-color); 775 border-radius: 1px; 776} 777 778.djs-search-highlight { 779 color: var(--search-result-highlight-color); 780} 781 782.djs-search-result-primary { 783 margin: 0 0 10px; 784} 785 786.djs-search-result-secondary { 787 font-family: monospace; 788 margin: 0; 789} 790 791.djs-search-result:hover { 792 background: var(--search-result-selected-color); 793} 794 795.djs-search-result-selected { 796 background: var(--search-result-selected-color); 797} 798 799.djs-search-result-selected:hover { 800 background: var(--search-result-selected-color); 801} 802 803.djs-search-overlay { 804 background: var(--search-result-selected-color); 805} 806 807/** 808 * hidden styles 809 */ 810.djs-element-hidden, 811.djs-element-hidden .djs-hit, 812.djs-element-hidden .djs-outline, 813.djs-label-hidden .djs-label { 814 display: none !important; 815} 816