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