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