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