123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505 |
- /**
- * outline styles
- */
- .djs-outline {
- fill: none;
- visibility: hidden;
- }
- .djs-element.hover .djs-outline,
- .djs-element.selected .djs-outline {
- visibility: visible;
- shape-rendering: crispEdges;
- stroke-dasharray: 3,3;
- }
- .djs-element.selected .djs-outline {
- stroke: #8888FF;
- stroke-width: 1px;
- }
- .djs-element.hover .djs-outline {
- stroke: #FF8888;
- stroke-width: 1px;
- }
- .djs-shape.connect-ok .djs-visual > :nth-child(1) {
- fill: #DCFECC /* light-green */ !important;
- }
- .djs-shape.connect-not-ok .djs-visual > :nth-child(1),
- .djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
- fill: #f9dee5 /* light-red */ !important;
- }
- svg.drop-not-ok {
- background: #f9dee5 /* light-red */ !important;
- }
- .djs-connection.connect-ok .djs-visual > :nth-child(1),
- .djs-connection.drop-ok .djs-visual > :nth-child(1) {
- stroke: #90DD5F /* light-green */ !important;
- }
- .djs-connection.connect-not-ok .djs-visual > :nth-child(1),
- .djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
- stroke: #E56283 /* light-red */ !important;
- }
- .drop-not-ok,
- .connect-not-ok {
- cursor: not-allowed;
- }
- .djs-element.attach-ok .djs-visual > :nth-child(1) {
- stroke-width: 5px !important;
- stroke: rgba(255, 116, 0, 0.7);
- }
- /**
- * Selection box style
- *
- */
- .djs-lasso-overlay {
- fill: rgb(255, 116, 0);
- fill-opacity: 0.1;
- stroke-dasharray: 5 1 3 1;
- stroke: rgb(255, 116, 0);
- shape-rendering: crispEdges;
- pointer-events: none;
- }
- /**
- * Resize styles
- */
- .djs-resize-overlay {
- fill: white;
- fill-opacity: 0.8;
- stroke-dasharray: 5 1 3 1;
- stroke: rgb(255, 116, 0);
- pointer-events: none;
- }
- .djs-resizer-hit {
- fill: none;
- pointer-events: all;
- }
- .djs-resizer-visual {
- fill: white;
- stroke-width: 1px;
- stroke: black;
- shape-rendering: crispEdges;
- stroke-opacity: 0.2;
- }
- .djs-cursor-resize-nwse,
- .djs-resizer-nw,
- .djs-resizer-se {
- cursor: nwse-resize;
- }
- .djs-cursor-resize-nesw,
- .djs-resizer-ne,
- .djs-resizer-sw {
- cursor: nesw-resize;
- }
- .djs-shape.djs-resizing > .djs-outline {
- visibility: hidden !important;
- }
- .djs-shape.djs-resizing > .djs-resizer {
- visibility: hidden;
- }
- .djs-dragger > .djs-resizer {
- visibility: hidden;
- }
- /**
- * drag styles
- */
- .djs-dragger {
- fill: white;
- fill-opacity: 0.6;
- stroke: #333;
- }
- .djs-dragger .djs-visual > :first-child {
- stroke: rgb(255, 116, 0) !important;
- }
- .djs-dragging {
- opacity: 0.3;
- }
- .djs-dragging,
- .djs-dragging > * {
- pointer-events: none !important;
- }
- .djs-dragging .djs-context-pad,
- .djs-dragging .djs-outline {
- display: none !important;
- }
- /**
- * no pointer events for visual
- */
- .djs-visual,
- .djs-outline {
- pointer-events: none;
- }
- /**
- * all pointer events for hit shape
- */
- .djs-shape .djs-hit {
- pointer-events: all;
- }
- .djs-connection .djs-hit {
- pointer-events: stroke;
- }
- /**
- * shape / connection basic styles
- */
- .djs-connection .djs-visual {
- stroke-width: 2px;
- fill: none;
- }
- .djs-cursor-grabbing {
- cursor: -webkit-grabbing;
- cursor: -moz-grabbing;
- cursor: grabbing;
- }
- .djs-cursor-crosshair {
- cursor: crosshair;
- }
- .djs-cursor-move {
- cursor: move;
- }
- .djs-cursor-resize-ns {
- cursor: ns-resize;
- }
- .djs-cursor-resize-ew {
- cursor: ew-resize;
- }
- /**
- * snapping
- */
- .djs-snap-line {
- stroke: rgb(255, 195, 66);
- stroke: rgba(255, 195, 66, 0.50);
- stroke-linecap: round;
- stroke-width: 2px;
- pointer-events: none;
- }
- /**
- * snapping
- */
- .djs-crosshair {
- stroke: #555;
- stroke-linecap: round;
- stroke-width: 1px;
- pointer-events: none;
- shape-rendering: crispEdges;
- stroke-dasharray: 5, 5;
- }
- /**
- * palette
- */
- .djs-palette {
- position: absolute;
- left: 20px;
- top: 20px;
- }
- .djs-palette:not(.open) {
- overflow: hidden;
- }
- .djs-palette .entry,
- .djs-palette .djs-palette-toggle {
- width: 46px;
- height: 46px;
- line-height: 46px;
- }
- .djs-palette .separator {
- margin: 3px 5px 5px 5px;
- border: solid 1px #DDD;
- border-radius: 1px;
- };
- .djs-palette .entry:before {
- vertical-align: middle;
- }
- .djs-palette .djs-palette-toggle {
- cursor: pointer;
- }
- .djs-palette .entry,
- .djs-palette .djs-palette-toggle {
- color: #333;
- font-size: 30px;
- text-align: center;
- }
- .djs-palette.open .djs-palette-toggle {
- height: 10px;
- }
- .djs-palette:not(.open) .djs-palette-entries {
- display: none;
- }
- .djs-palette .djs-palette-toggle:hover {
- background: #666;
- }
- .djs-palette .entry:hover {
- color: rgb(255, 116, 0);
- }
- /**
- * context-pad
- */
- .djs-overlay-context-pad {
- width: 72px;
- }
- .djs-context-pad {
- position: absolute;
- display: none;
- pointer-events: none;
- }
- .djs-context-pad .entry {
- width: 22px;
- height: 22px;
- text-align: center;
- display: inline-block;
- font-size: 22px;
- margin: 0 2px 2px 0;
- border-radius: 3px;
- cursor: default;
- background-color: #FEFEFE;
- box-shadow: 0 0 2px 1px #FEFEFE;
- pointer-events: all;
- }
- .djs-context-pad .entry:before {
- vertical-align: top;
- }
- .djs-context-pad .entry:hover {
- background: rgb(255, 252, 176);
- }
- .djs-context-pad.open {
- display: block;
- }
- /**
- * popup styles
- */
- .djs-popup .entry {
- line-height: 20px;
- white-space: nowrap;
- border: solid 1px transparent;
- cursor: default;
- }
- /* larger font for prefixed icons */
- .djs-popup .entry:before {
- vertical-align: middle;
- font-size: 20px;
- }
- .djs-popup .entry > span {
- vertical-align: middle;
- font-size: 14px;
- }
- .djs-popup .entry:hover,
- .djs-popup .entry.active:hover {
- background: rgb(255, 252, 176);
- }
- .djs-popup .entry.disabled {
- background: inherit;
- }
- .djs-popup .entry.active {
- color: rgb(255, 116, 0);
- border: solid 1px rgb(255, 116, 0);
- border-radius: 3px;
- background-color: #F6F6F6;
- }
- .djs-popup-body .entry {
- padding: 2px 10px 2px 5px;
- }
- .djs-popup-header .entry {
- display: inline-block;
- padding: 2px 3px 2px 3px;
- }
- .djs-popup-body .entry > span {
- margin-left: 5px;
- }
- .djs-popup-body {
- background-color: #FEFEFE;
- }
- .djs-popup-header {
- border-bottom: 1px solid #DDD;
- }
- .djs-popup-header .entry {
- margin: 1px;
- margin-left: 3px;
- }
- .djs-popup-header .entry:last-child {
- margin-right: 3px;
- }
- /**
- * popup / palette styles
- */
- .djs-popup, .djs-palette {
- background: #FAFAFA;
- border: solid 1px #CCC;
- border-radius: 2px;
- box-shadow: 0 1px 4px rgba(0,0,0,0.3);
- }
- /**
- * touch
- */
- .djs-shape,
- .djs-connection {
- touch-action: none;
- }
- .djs-bendpoint {
- display: none;
- }
- /**
- * bendpoints
- */
- .djs-bendpoint .djs-visual {
- pointer-events: none;
- fill: rgba(255, 255, 121, 0.8);
- stroke-width: 1px;
- stroke-opacity: 0.5;
- stroke: black;
- }
- .djs-bendpoint:hover,
- .djs-bendpoints.hover .djs-bendpoint,
- .djs-bendpoints.selected .djs-bendpoint {
- display: block;
- }
- .djs-bendpoints:not(.hover) .floating {
- display: none;
- }
- .djs-bendpoint:hover .djs-visual,
- .djs-bendpoint.floating .djs-visual {
- fill: yellow;
- }
- .djs-bendpoint.floating .djs-hit {
- pointer-events: none;
- }
- .djs-bendpoint .djs-hit {
- pointer-events: all;
- fill: none;
- }
- .djs-updating,
- .djs-updating > * {
- pointer-events: none !important;
- }
- .djs-updating .djs-context-pad,
- .djs-updating .djs-outline,
- .djs-updating .djs-bendpoint,
- .connect-ok .djs-bendpoint,
- .connect-not-ok .djs-bendpoint,
- .drop-ok .djs-bendpoint,
- .drop-not-ok .djs-bendpoint {
- display: none !important;
- }
- .djs-bendpoint.djs-dragging {
- display: block;
- opacity: 1.0;
- }
- .djs-bendpoint.djs-dragging .djs-visual {
- fill: yellow;
- }
- /**
- * tooltips
- */
- .djs-tooltip-error {
- font-size: 11px;
- line-height: 18px;
- text-align: left;
- padding: 5px;
- opacity: 0.7;
- }
- .djs-tooltip-error > * {
- width: 160px;
- background: rgb(252, 236, 240);
- color: rgb(158, 76, 76);
- padding: 3px 7px;
- box-shadow: 0 1px 3px rgba(0,0,0, 0.2);
- border-radius: 5px;
- border-left: solid 5px rgb(174, 73, 73);
- }
- .djs-tooltip-error:hover {
- opacity: 1;
- }
|