1/** 2 * color definitions 3 */ 4.djs-parent { 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 15 --color-blue-205-100-45: hsl(205, 100%, 45%); 16 --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 17 --color-blue-205-100-50: hsl(205, 100%, 50%); 18 --color-blue-205-100-50-opacity-15: hsla(205, 100%, 50%, 15%); 19 --color-blue-205-100-70: hsl(205, 100%, 75%); 20 --color-blue-205-100-95: hsl(205, 100%, 95%); 21 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: hsl(0, 0%, 100%); 30 --color-black: hsl(0, 0%, 0%); 31 --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 32 --color-black-opacity-30: hsla(0, 0%, 0%, 30%); 33 34 --canvas-fill-color: var(--color-white); 35 36 --bendpoint-fill-color: var(--color-blue-205-100-45); 37 --bendpoint-stroke-color: var(--canvas-fill-color); 38 39 --context-pad-entry-background-color: var(--color-white); 40 --context-pad-entry-hover-background-color: var(--color-grey-225-10-95); 41 42 --element-dragger-color: var(--color-blue-205-100-50); 43 --element-hover-outline-fill-color: var(--color-blue-205-100-45); 44 --element-selected-outline-stroke-color: var(--color-blue-205-100-50); 45 --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70); 46 47 --lasso-fill-color: var(--color-blue-205-100-50-opacity-15); 48 --lasso-stroke-color: var(--element-selected-outline-stroke-color); 49 50 --palette-entry-color: var(--color-grey-225-10-15); 51 --palette-entry-hover-color: var(--color-blue-205-100-45); 52 --palette-entry-selected-color: var(--color-blue-205-100-50); 53 --palette-separator-color: var(--color-grey-225-10-75); 54 --palette-toggle-hover-background-color: var(--color-grey-225-10-55); 55 --palette-background-color: var(--color-grey-225-10-97); 56 --palette-border-color: var(--color-grey-225-10-75); 57 58 --popup-font-size: 14px; 59 --popup-header-entry-selected-color: var(--color-blue-205-100-50); 60 --popup-header-font-weight: bolder; 61 --popup-background-color: var(--color-white); 62 --popup-border-color: transparent; 63 --popup-shadow-color: var(--color-black-opacity-30); 64 --popup-description-color: var(--color-grey-225-10-55); 65 --popup-no-results-color: var(--color-grey-225-10-55); 66 --popup-entry-title-color: var(--color-grey-225-10-55); 67 --popup-entry-hover-color: var(--color-grey-225-10-95); 68 --popup-search-border-color: var(--color-grey-225-10-75); 69 --popup-search-focus-border-color: var(--color-blue-205-100-50); 70 --popup-search-focus-background-color: var(--color-blue-205-100-95); 71 72 --resizer-fill-color: var(--color-blue-205-100-45); 73 --resizer-stroke-color: var(--canvas-fill-color); 74 75 --search-container-background-color: var(--color-grey-225-10-97); 76 --search-container-border-color: var(--color-blue-205-100-50); 77 --search-container-box-shadow-color: var(--color-blue-205-100-95); 78 --search-container-box-shadow-inset-color: var(--color-grey-225-10-80); 79 --search-input-border-color: var(--color-grey-225-10-75); 80 --search-result-border-color: var(--color-grey-225-10-75); 81 --search-result-highlight-color: var(--color-black); 82 --search-result-selected-color: var(--color-blue-205-100-45-opacity-30); 83 84 --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50); 85 --shape-connect-allowed-fill-color: var(--color-grey-225-10-97); 86 --shape-drop-allowed-fill-color: var(--color-grey-225-10-97); 87 --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97); 88 --shape-resize-preview-stroke-color: var(--color-blue-205-100-50); 89 90 --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30); 91 92 --space-tool-crosshair-stroke-color: var(--color-black); 93 94 --tooltip-error-background-color: var(--color-red-360-100-97); 95 --tooltip-error-border-color: var(--color-red-360-100-45); 96 --tooltip-error-color: var(--color-red-360-100-45); 97} 98 99/** 100 * outline styles 101 */ 102 103.djs-outline, 104.djs-selection-outline { 105 fill: none; 106 shape-rendering: geometricPrecision; 107 stroke-width: 2px; 108} 109 110.djs-outline { 111 visibility: hidden; 112} 113 114.djs-selection-outline { 115 stroke: var(--element-selected-outline-stroke-color); 116} 117 118.djs-element.selected .djs-outline { 119 visibility: visible; 120 121 stroke: var(--element-selected-outline-stroke-color); 122} 123 124.djs-multi-select .djs-element.selected .djs-outline { 125 stroke: var(--element-selected-outline-secondary-stroke-color); 126} 127 128.djs-shape.connect-ok .djs-visual > :nth-child(1) { 129 fill: var(--shape-connect-allowed-fill-color) !important; 130} 131 132.djs-shape.connect-not-ok .djs-visual > :nth-child(1), 133.djs-shape.drop-not-ok .djs-visual > :nth-child(1) { 134 fill: var(--shape-drop-not-allowed-fill-color) !important; 135} 136 137.djs-shape.new-parent .djs-visual > :nth-child(1) { 138 fill: var(--shape-drop-allowed-fill-color) !important; 139} 140 141svg.drop-not-ok { 142 background: var(--shape-drop-not-allowed-fill-color) !important; 143} 144 145svg.new-parent { 146 background: var(--shape-drop-allowed-fill-color) !important; 147} 148 149 150/* Override move cursor during drop and connect */ 151.drop-not-ok, 152.connect-not-ok, 153.drop-not-ok *, 154.connect-not-ok * { 155 cursor: not-allowed !important; 156} 157 158.drop-ok, 159.connect-ok, 160.drop-ok *, 161.connect-ok * { 162 cursor: default !important; 163} 164 165.djs-element.attach-ok .djs-visual > :nth-child(1) { 166 stroke-width: 5px !important; 167 stroke: var(--shape-attach-allowed-stroke-color) !important; 168} 169 170.djs-frame.connect-not-ok .djs-visual > :nth-child(1), 171.djs-frame.drop-not-ok .djs-visual > :nth-child(1) { 172 stroke-width: 3px !important; 173 stroke: var(--shape-drop-not-allowed-fill-color) !important; 174 fill: none !important; 175} 176 177/** 178* Selection box style 179* 180*/ 181.djs-lasso-overlay { 182 fill: var(--lasso-fill-color); 183 stroke: var(--lasso-stroke-color); 184 stroke-width: 2px; 185 shape-rendering: geometricPrecision; 186 pointer-events: none; 187} 188 189/** 190 * Resize styles 191 */ 192.djs-resize-overlay { 193 fill: none; 194 195 stroke-dasharray: 5 1 3 1; 196 stroke: var(--shape-resize-preview-stroke-color); 197 198 pointer-events: none; 199} 200 201.djs-resizer-hit { 202 fill: none; 203 pointer-events: all; 204} 205 206.djs-resizer-visual { 207 fill: var(--resizer-fill-color); 208 stroke-width: 1px; 209 stroke: var(--resizer-stroke-color); 210 shape-rendering: geometricPrecision; 211} 212 213.djs-resizer:hover .djs-resizer-visual { 214 stroke: var(--resizer-stroke-color); 215 stroke-opacity: 1; 216} 217 218.djs-cursor-resize-ns, 219.djs-resizer-n, 220.djs-resizer-s { 221 cursor: ns-resize; 222} 223 224.djs-cursor-resize-ew, 225.djs-resizer-e, 226.djs-resizer-w { 227 cursor: ew-resize; 228} 229 230.djs-cursor-resize-nwse, 231.djs-resizer-nw, 232.djs-resizer-se { 233 cursor: nwse-resize; 234} 235 236.djs-cursor-resize-nesw, 237.djs-resizer-ne, 238.djs-resizer-sw { 239 cursor: nesw-resize; 240} 241 242.djs-shape.djs-resizing > .djs-outline { 243 visibility: hidden !important; 244} 245 246.djs-shape.djs-resizing > .djs-resizer { 247 visibility: hidden; 248} 249 250.djs-dragger > .djs-resizer { 251 visibility: hidden; 252} 253 254/** 255 * drag styles 256 */ 257.djs-dragger * { 258 fill: none !important; 259 stroke: var(--element-dragger-color) !important; 260} 261 262.djs-dragger tspan, 263.djs-dragger text { 264 fill: var(--element-dragger-color) !important; 265 stroke: none !important; 266} 267 268marker.djs-dragger circle, 269marker.djs-dragger path, 270marker.djs-dragger polygon, 271marker.djs-dragger polyline, 272marker.djs-dragger rect { 273 fill: var(--element-dragger-color) !important; 274 stroke: none !important; 275} 276 277marker.djs-dragger text, 278marker.djs-dragger tspan { 279 fill: none !important; 280 stroke: var(--element-dragger-color) !important; 281} 282 283.djs-dragging { 284 opacity: 0.3; 285} 286 287.djs-dragging, 288.djs-dragging > * { 289 pointer-events: none !important; 290} 291 292.djs-dragging .djs-context-pad, 293.djs-dragging .djs-outline { 294 display: none !important; 295} 296 297/** 298 * no pointer events for visual 299 */ 300.djs-visual, 301.djs-outline { 302 pointer-events: none; 303} 304 305.djs-element.attach-ok .djs-hit { 306 stroke-width: 60px !important; 307} 308 309/** 310 * all pointer events for hit shape 311 */ 312.djs-element > .djs-hit-all, 313.djs-element > .djs-hit-no-move { 314 pointer-events: all; 315} 316 317.djs-element > .djs-hit-stroke, 318.djs-element > .djs-hit-click-stroke { 319 pointer-events: stroke; 320} 321 322/** 323 * shape / connection basic styles 324 */ 325.djs-connection .djs-visual { 326 stroke-width: 2px; 327 fill: none; 328} 329 330.djs-cursor-grab { 331 cursor: -webkit-grab; 332 cursor: -moz-grab; 333 cursor: grab; 334} 335 336.djs-cursor-grabbing { 337 cursor: -webkit-grabbing; 338 cursor: -moz-grabbing; 339 cursor: grabbing; 340} 341 342.djs-cursor-crosshair { 343 cursor: crosshair; 344} 345 346.djs-cursor-move { 347 cursor: move; 348} 349 350.djs-cursor-resize-ns { 351 cursor: ns-resize; 352} 353 354.djs-cursor-resize-ew { 355 cursor: ew-resize; 356} 357 358 359/** 360 * snapping 361 */ 362.djs-snap-line { 363 stroke: var(--snap-line-stroke-color); 364 stroke-linecap: round; 365 stroke-width: 2px; 366 pointer-events: none; 367} 368 369/** 370 * snapping 371 */ 372.djs-crosshair { 373 stroke: var(--space-tool-crosshair-stroke-color); 374 stroke-linecap: round; 375 stroke-width: 1px; 376 pointer-events: none; 377 shape-rendering: geometricPrecision; 378 stroke-dasharray: 5, 5; 379} 380 381/** 382 * palette 383 */ 384 385.djs-palette { 386 position: absolute; 387 left: 20px; 388 top: 20px; 389 390 box-sizing: border-box; 391 width: 48px; 392} 393 394.djs-palette .separator { 395 margin: 5px; 396 padding-top: 5px; 397 398 border: none; 399 border-bottom: solid 1px var(--palette-separator-color); 400 401 clear: both; 402} 403 404.djs-palette .entry:before { 405 vertical-align: initial; 406} 407 408.djs-palette .djs-palette-toggle { 409 cursor: pointer; 410} 411 412.djs-palette .entry, 413.djs-palette .djs-palette-toggle { 414 color: var(--palette-entry-color); 415 font-size: 30px; 416 417 text-align: center; 418} 419 420.djs-palette .entry { 421 float: left; 422} 423 424.djs-palette .entry img { 425 max-width: 100%; 426} 427 428.djs-palette .djs-palette-entries:after { 429 content: ''; 430 display: table; 431 clear: both; 432} 433 434.djs-palette .djs-palette-toggle:hover { 435 background: var(--palette-toggle-hover-background-color); 436} 437 438.djs-palette .entry:hover { 439 color: var(--palette-entry-hover-color); 440} 441 442.djs-palette .highlighted-entry { 443 color: var(--palette-entry-selected-color) !important; 444} 445 446.djs-palette .entry, 447.djs-palette .djs-palette-toggle { 448 width: 46px; 449 height: 46px; 450 line-height: 46px; 451 cursor: default; 452} 453 454/** 455 * Palette open / two-column layout is controlled via 456 * classes on the palette. Events to hook into palette 457 * changed life-cycle are available in addition. 458 */ 459.djs-palette.two-column.open { 460 width: 94px; 461} 462 463.djs-palette:not(.open) .djs-palette-entries { 464 display: none; 465} 466 467.djs-palette:not(.open) { 468 overflow: hidden; 469} 470 471.djs-palette.open .djs-palette-toggle { 472 display: none; 473} 474 475/** 476 * context-pad 477 */ 478.djs-overlay-context-pad { 479 width: 72px; 480 z-index: 100; 481} 482 483.djs-context-pad { 484 position: absolute; 485 display: none; 486 pointer-events: none; 487 line-height: 1; 488} 489 490.djs-context-pad .entry { 491 width: 22px; 492 height: 22px; 493 text-align: center; 494 display: inline-block; 495 font-size: 22px; 496 margin: 0 2px 2px 0; 497 498 border-radius: 3px; 499 500 cursor: default; 501 502 background-color: var(--context-pad-entry-background-color); 503 box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color); 504 pointer-events: all; 505 vertical-align: middle; 506} 507 508.djs-context-pad .entry:hover { 509 background: var(--context-pad-entry-hover-background-color); 510} 511 512.djs-context-pad.open { 513 display: block; 514} 515 516/** 517 * popup styles 518 */ 519.djs-popup-backdrop { 520 position: fixed; 521 width: 100vw; 522 height: 100vh; 523 top: 0; 524 left: 0; 525 z-index: 200; 526 line-height: 1; 527 font-family: "IBM Plex Sans", sans-serif; 528} 529 530.djs-popup { 531 box-sizing: border-box; 532 width: min-content; 533 background: var(--popup-background-color); 534 overflow: hidden; 535 position: absolute; 536 537 box-shadow: 0px 2px 6px var(--popup-shadow-color); 538 border: solid 1px var(--popup-border-color); 539 min-width: 120px; 540 outline: none; 541 font-size: var(--popup-font-size); 542} 543 544.djs-popup-search input { 545 width: 100%; 546 box-sizing: border-box; 547 font-size: var(--popup-font-size); 548 padding: 3px 6px; 549 border-radius: 2px; 550 border: solid 1px var(--popup-search-border-color); 551 line-height: 21px; 552} 553 554.djs-popup-search input:focus { 555 background-color: var(--popup-search-focus-background-color); 556 border: solid 1px var(--popup-search-focus-border-color); 557 outline: none; 558} 559 560.djs-popup-header { 561 display: flex; 562 align-items: stretch; 563 line-height: 20px; 564 margin: 10px 12px 10px 12px; 565} 566 567.djs-popup-header .entry { 568 border-radius: 2px; 569} 570 571.djs-popup-header .entry.active { 572 color: var(--popup-header-entry-selected-color); 573} 574 575.djs-popup-header .entry.disabled { 576 color: inherit; 577} 578 579.djs-popup-search { 580 margin: 10px 12px; 581} 582 583.djs-popup-title { 584 font-size: var(--popup-font-size); 585 font-weight: var(--popup-header-font-weight); 586 flex: 1; 587 margin: 0; 588} 589 590.djs-popup-search { 591 position: relative; 592 width: auto; 593} 594 595.djs-popup-search-icon { 596 position: absolute; 597 left: 8px; 598 top: 7px; 599} 600 601.djs-popup-search input { 602 padding-left: 25px; 603} 604 605.djs-popup-results { 606 margin: 7px 3px 7px 12px; 607 list-style: none; 608 max-height: 280px; 609 overflow: auto; 610 padding-right: 9px; 611} 612 613.djs-popup-group { 614 margin: 0; 615 padding: 0; 616 width: 100%; 617} 618 619.djs-popup-body .entry, 620.djs-popup-body .entry-header { 621 padding: 5px 7px; 622 cursor: default; 623 border-radius: 4px; 624} 625 626.djs-popup-body .entry-header { 627 font-weight: var(--popup-header-font-weight); 628 color: var(--popup-entry-title-color); 629 padding-left: 0; 630} 631 632.djs-popup [class*="icon"] .djs-popup-label, 633.djs-popup-label:not(:first-child) { 634 margin-left: .5em; 635} 636 637.djs-popup [class*="icon"]:before, 638.djs-popup-entry-icon { 639 width: 1em; 640 height: 1em; 641 display: inline-block; 642 font-size: 1.4em; 643 vertical-align: middle; 644} 645 646.djs-popup-body .entry-header:not(:first-child) { 647 margin-top: 8px; 648 margin-bottom: 2px; 649} 650 651.djs-popup-body .entry { 652 display: flex; 653 flex-direction: row; 654 align-items: stretch; 655 height: min-content; 656} 657 658.djs-popup .entry.selected { 659 background-color: var(--popup-entry-hover-color); 660} 661 662.djs-popup-body .entry:not(:first-child) { 663 margin-top: 2px; 664} 665 666.djs-popup-entry-content { 667 display: flex; 668 flex-direction: column; 669 flex: 1; 670 overflow: hidden; 671} 672 673.djs-popup-entry-description { 674 color: var(--popup-description-color); 675} 676 677.djs-popup-label, 678.djs-popup-entry-description { 679 line-height: 1.4em; 680} 681 682.djs-popup-title, 683.djs-popup-label, 684.djs-popup-entry-description, 685.djs-popup .entry-header { 686 overflow: hidden; 687 text-overflow: ellipsis; 688 white-space: nowrap; 689} 690 691.djs-popup-entry-name { 692 display: flex; 693} 694 695.entry-content { 696 display: flex; 697 flex-direction: column; 698 flex: 1; 699 overflow: hidden; 700} 701 702.djs-popup-body { 703 flex-direction: column; 704 width: auto; 705} 706 707.djs-popup *::-webkit-scrollbar { 708 width: 6px; 709} 710 711.djs-popup *::-webkit-scrollbar-thumb { 712 border-radius: 3px; 713 background-color: rgba(0, 0, 0, 0.2); 714} 715 716.djs-popup *::-webkit-scrollbar-track { 717 box-shadow: none; 718 background: transparent; 719 margin: 0; 720 padding: 5px; 721} 722 723.djs-popup-no-results { 724 padding: 0 12px 12px 12px; 725 color: var(--popup-no-results-color); 726} 727 728.djs-popup-entry-docs { 729 flex: 0; 730 flex-direction: row; 731 align-items: center; 732 padding-left: 5px; 733 display: none; 734} 735 736.djs-popup-body .entry:hover .djs-popup-entry-docs { 737 display: flex; 738} 739 740.djs-popup-entry-docs svg { 741 vertical-align: middle; 742 margin: auto 2px auto 5px; 743} 744 745/** 746 * palette styles 747 */ 748.djs-palette { 749 background: var(--palette-background-color); 750 border: solid 1px var(--palette-border-color); 751 border-radius: 2px; 752} 753 754/** 755 * touch 756 */ 757 758.djs-shape, 759.djs-connection { 760 touch-action: none; 761} 762 763.djs-segment-dragger, 764.djs-bendpoint { 765 display: none; 766} 767 768/** 769 * bendpoints 770 */ 771.djs-segment-dragger .djs-visual { 772 display: none; 773 774 fill: var(--bendpoint-fill-color); 775 stroke: var(--bendpoint-stroke-color); 776 stroke-width: 1px; 777 stroke-opacity: 1; 778} 779 780.djs-segment-dragger:hover .djs-visual { 781 display: block; 782} 783 784.djs-bendpoint .djs-visual { 785 fill: var(--bendpoint-fill-color); 786 stroke: var(--bendpoint-stroke-color); 787 stroke-width: 1px; 788} 789 790.djs-segment-dragger:hover, 791.djs-bendpoints.hover .djs-segment-dragger, 792.djs-bendpoints.selected .djs-segment-dragger, 793.djs-bendpoint:hover, 794.djs-bendpoints.hover .djs-bendpoint, 795.djs-bendpoints.selected .djs-bendpoint { 796 display: block; 797} 798 799.djs-drag-active .djs-bendpoints * { 800 display: none; 801} 802 803.djs-bendpoints:not(.hover) .floating { 804 display: none; 805} 806 807.djs-segment-dragger:hover .djs-visual, 808.djs-segment-dragger.djs-dragging .djs-visual, 809.djs-bendpoint:hover .djs-visual, 810.djs-bendpoint.floating .djs-visual { 811 fill: var(--bendpoint-fill-color); 812 stroke: var(--bendpoint-stroke-color); 813 stroke-opacity: 1; 814} 815 816.djs-bendpoint.floating .djs-hit { 817 pointer-events: none; 818} 819 820.djs-segment-dragger .djs-hit, 821.djs-bendpoint .djs-hit { 822 fill: none; 823 pointer-events: all; 824} 825 826.djs-segment-dragger.horizontal .djs-hit { 827 cursor: ns-resize; 828} 829 830.djs-segment-dragger.vertical .djs-hit { 831 cursor: ew-resize; 832} 833 834.djs-segment-dragger.djs-dragging .djs-hit { 835 pointer-events: none; 836} 837 838.djs-updating, 839.djs-updating > * { 840 pointer-events: none !important; 841} 842 843.djs-updating .djs-context-pad, 844.djs-updating .djs-outline, 845.djs-updating .djs-bendpoint, 846.djs-multi-select .djs-bendpoint, 847.djs-multi-select .djs-segment-dragger, 848.connect-ok .djs-bendpoint, 849.connect-not-ok .djs-bendpoint, 850.drop-ok .djs-bendpoint, 851.drop-not-ok .djs-bendpoint { 852 display: none !important; 853} 854 855.djs-segment-dragger.djs-dragging, 856.djs-bendpoint.djs-dragging { 857 display: block; 858 opacity: 1.0; 859} 860 861 862/** 863 * tooltips 864 */ 865.djs-tooltip-error { 866 width: 160px; 867 padding: 6px; 868 869 background: var(--tooltip-error-background-color); 870 border: solid 1px var(--tooltip-error-border-color); 871 border-radius: 2px; 872 color: var(--tooltip-error-color); 873 font-size: 12px; 874 line-height: 16px; 875 876 opacity: 0.75; 877} 878 879.djs-tooltip-error:hover { 880 opacity: 1; 881} 882 883 884/** 885 * search pad 886 */ 887.djs-search-container { 888 position: absolute; 889 top: 20px; 890 left: 0; 891 right: 0; 892 margin-left: auto; 893 margin-right: auto; 894 895 width: 25%; 896 min-width: 300px; 897 max-width: 400px; 898 z-index: 10; 899 900 font-size: 1.05em; 901 opacity: 0.9; 902 background: var(--search-container-background-color); 903 border: solid 1px var(--search-container-border-color); 904 border-radius: 2px; 905 box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset; 906} 907 908.djs-search-container:not(.open) { 909 display: none; 910} 911 912.djs-search-input input { 913 font-size: 1.05em; 914 width: 100%; 915 padding: 6px 10px; 916 border: 1px solid var(--search-input-border-color); 917 box-sizing: border-box; 918} 919 920.djs-search-input input:focus { 921 outline: none; 922 border-color: var(--search-input-border-color); 923} 924 925.djs-search-results { 926 position: relative; 927 overflow-y: auto; 928 max-height: 200px; 929} 930 931.djs-search-results:hover { 932 cursor: pointer; 933} 934 935.djs-search-result { 936 width: 100%; 937 padding: 6px 10px; 938 background: white; 939 border-bottom: solid 1px var(--search-result-border-color); 940 border-radius: 1px; 941} 942 943.djs-search-highlight { 944 color: var(--search-result-highlight-color); 945} 946 947.djs-search-result-primary { 948 margin: 0 0 10px; 949} 950 951.djs-search-result-secondary { 952 font-family: monospace; 953 margin: 0; 954} 955 956.djs-search-result:hover { 957 background: var(--search-result-selected-color); 958} 959 960.djs-search-result-selected { 961 background: var(--search-result-selected-color); 962} 963 964.djs-search-result-selected:hover { 965 background: var(--search-result-selected-color); 966} 967 968.djs-search-overlay { 969 background: var(--search-result-selected-color); 970} 971 972/** 973 * hidden styles 974 */ 975.djs-element-hidden, 976.djs-element-hidden .djs-hit, 977.djs-element-hidden .djs-outline, 978.djs-label-hidden .djs-label { 979 display: none !important; 980} 981 982.djs-element .djs-hit-stroke, 983.djs-element .djs-hit-click-stroke, 984.djs-element .djs-hit-all { 985 cursor: move; 986}