src/main/resources/META-INF/resources/designer/css/diagram-js.css

   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: #54FF00 /* light-green */ !important;
  29   fill-opacity: 0.2;
  30 }
  31
  32 .djs-shape.connect-not-ok .djs-visual > :nth-child(1),
  33 .djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
  34   fill: #E56283 /* light-red */ !important;
  35   fill-opacity: 0.2;
  36 }
  37
  38 svg.drop-not-ok {
  39   background: rgba(229, 98, 131, 0.2) /* light-red */ !important;
  40 }
  41
  42 .djs-connection.connect-ok .djs-visual > :nth-child(1),
  43 .djs-connection.drop-ok .djs-visual > :nth-child(1) {
  44   stroke: #90DD5F /* light-green */ !important;
  45 }
  46
  47 .djs-connection.connect-not-ok .djs-visual > :nth-child(1),
  48 .djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
  49   stroke: #E56283 /* light-red */ !important;
  50 }
  51
  52 .drop-not-ok,
  53 .connect-not-ok {
  54   cursor: not-allowed;
  55 }
  56
  57
  58 /**
  59 * Selection box style
  60 *
  61 */
  62 .djs-lasso-overlay {
  63   fill: rgb(255, 116, 0);
  64   fill-opacity: 0.1;
  65
  66   stroke-dasharray: 5 1 3 1;
  67   stroke: rgb(255, 116, 0);
  68
  69   shape-rendering: crispEdges;
  70   pointer-events: none;
  71 }
  72
  73 /**
  74  * Resize styles
  75  */
  76 .djs-resize-overlay {
  77   fill: white;
  78   fill-opacity: 0.8;
  79
  80   stroke-dasharray: 5 1 3 1;
  81   stroke: rgb(255, 116, 0);
  82
  83   pointer-events: none;
  84 }
  85
  86 .djs-resizer-hit {
  87   fill: none;
  88   pointer-events: all;
  89 }
  90
  91 .djs-resizer-visual {
  92   fill: white;
  93   stroke-width: 1px;
  94   stroke: black;
  95   shape-rendering: crispEdges;
  96   stroke-opacity: 0.2;
  97 }
  98
  99 .djs-cursor-resize-nwse,
 100 .djs-resizer-nw,
 101 .djs-resizer-se {
 102   cursor: nwse-resize;
 103 }
 104
 105 .djs-cursor-resize-nesw,
 106 .djs-resizer-ne,
 107 .djs-resizer-sw {
 108   cursor: nesw-resize;
 109 }
 110
 111 .djs-shape.djs-resizing > .djs-outline {
 112   visibility: hidden !important;
 113 }
 114
 115 .djs-shape.djs-resizing > .djs-resizer {
 116   visibility: hidden;
 117 }
 118
 119 .djs-dragger > .djs-resizer {
 120   visibility: hidden;
 121 }
 122
 123 /**
 124  * drag styles
 125  */
 126 .djs-dragger {
 127   fill: white;
 128   fill-opacity: 0.6;
 129   stroke: #333;
 130 }
 131
 132 .djs-dragger .djs-visual > :first-child {
 133   stroke: rgb(255, 116, 0) !important;
 134 }
 135
 136 .djs-dragging {
 137   opacity: 0.3;
 138 }
 139
 140 .djs-dragging,
 141 .djs-dragging > * {
 142   pointer-events: none !important;
 143 }
 144
 145 .djs-dragging .djs-context-pad,
 146 .djs-dragging .djs-outline {
 147   display: none !important;
 148 }
 149
 150 /**
 151  * no pointer events for visual
 152  */
 153 .djs-visual,
 154 .djs-outline {
 155   pointer-events: none;
 156 }
 157
 158 /**
 159  * all pointer events for hit shape
 160  */
 161 .djs-shape .djs-hit {
 162   pointer-events: all;
 163 }
 164
 165 .djs-connection .djs-hit {
 166   pointer-events: stroke;
 167 }
 168
 169 /**
 170  * shape / connection basic styles
 171  */
 172 .djs-connection .djs-visual {
 173   stroke-width: 2px;
 174   fill: none;
 175 }
 176
 177 .djs-cursor-grabbing {
 178   cursor: -webkit-grabbing;
 179   cursor: -moz-grabbing;
 180   cursor: grabbing;
 181 }
 182
 183 .djs-cursor-crosshair {
 184   cursor: crosshair;
 185 }
 186
 187 .djs-cursor-move {
 188   cursor: move;
 189 }
 190
 191 .djs-cursor-resize-ns {
 192   cursor: ns-resize;
 193 }
 194
 195 .djs-cursor-resize-ew {
 196   cursor: ew-resize;
 197 }
 198
 199
 200 /**
 201  * snapping
 202  */
 203 .djs-snap-line {
 204   stroke: rgb(255, 195, 66);
 205   stroke: rgba(255, 195, 66, 0.50);
 206   stroke-linecap: round;
 207   stroke-width: 2px;
 208   pointer-events: none;
 209 }
 210
 211 /**
 212  * snapping
 213  */
 214 .djs-crosshair {
 215   stroke: #555;
 216   stroke-linecap: round;
 217   stroke-width: 1px;
 218   pointer-events: none;
 219   shape-rendering: crispEdges;
 220   stroke-dasharray: 5, 5;
 221 }
 222
 223 /**
 224  * palette
 225  */
 226
 227 .djs-palette {
 228   position: absolute;
 229   left: 20%;
 230   top: 4px;
 231   x: 400px;
 232   y: 10px;
 233   height: 50px;
 234   width: 400px;
 235 }
 236
 237 .djs-palette:not(.open) {
 238   overflow: hidden;
 239 }
 240
 241 .djs-palette .entry {
 242   width: 46px;
 243   height: 50px;
 244   line-height: 46px;
 245   display:inline;
 246   float:left;
 247 }
 248
 249
 250 .djs-palette .djs-palette-toggle {
 251   width: 426px;
 252   height: 60px;
 253   line-height: 46px;
 254   display:inline;
 255   float:left;
 256 }
 257
 258 .djs-palette .separator {
 259   margin: 3px 5px 5px 5px;
 260   border: solid 1px #DDD;
 261   border-radius: 1px;
 262 };
 263
 264 .djs-palette .entry:before {
 265   vertical-align: middle;
 266 }
 267
 268 .djs-palette .djs-palette-toggle {
 269   cursor: pointer;
 270 }
 271
 272 .djs-palette .entry,
 273 .djs-palette .djs-palette-toggle {
 274   color: #333;
 275   font-size: 30px;
 276
 277   text-align: center;
 278 }
 279
 280 .djs-palette.open .djs-palette-toggle {
 281   height: 14px;
 282 }
 283
 284 .djs-palette:not(.open) .djs-palette-entries {
 285   display: none;
 286   border-color:black;
 287 }
 288
 289 .djs-palette .djs-palette-toggle:hover {
 290 /*  background: #fff; */
 291 }
 292
 293 .djs-palette .entry:hover {
 294   /* color: rgb(255, 116, 0); */
 295 }
 296
 297 /**
 298  * context-pad
 299  */
 300 .djs-overlay-context-pad {
 301   width: 72px;
 302 }
 303
 304 .djs-context-pad {
 305   position: absolute;
 306   display: none;
 307   pointer-events: none;
 308 }
 309
 310 .djs-context-pad .entry {
 311   width: 22px;
 312   height: 22px;
 313   text-align: center;
 314   display: inline-block;
 315   font-size: 22px;
 316   margin: 0 2px 2px 0;
 317
 318   border-radius: 3px;
 319
 320   cursor: default;
 321
 322   background-color: rgba(255,255,255, 0.85);
 323   box-shadow: 0 0 2px 1px rgba(255,255,255, 0.85);
 324
 325   pointer-events: all;
 326 }
 327
 328 .djs-context-pad .entry:before {
 329   vertical-align: top;
 330 }
 331
 332 .djs-context-pad .entry:hover {
 333   background: rgb(255, 252, 176);
 334 }
 335
 336 .djs-context-pad.open {
 337   display: block;
 338   z-index: 9;
 339 }
 340
 341 .djs-popup-entry {
 342   font-size: 20px;
 343   line-height: 20px;
 344   padding: 2px 10px 2px 5px;
 345   background-color: rgba(255,255,255, 0.85);
 346   white-space: nowrap;
 347 }
 348
 349 .djs-popup-entry:hover {
 350   background: rgb(255, 252, 176);
 351 }
 352
 353 .djs-popup-entry > span {
 354   font-size: 14px;
 355   margin-left: 5px;
 356
 357   vertical-align: middle;
 358 }
 359
 360 .djs-popup-entry:before {
 361   vertical-align: middle;
 362 }
 363
 364 /**
 365  * popup / palette styles
 366  */
 367 .djs-popup, .djs-palette {
 368   background: #FAFAFA;
 369   border: solid 1px #CCC;
 370   border-radius: 2px;
 371   box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 372 }
 373
 374 /**
 375  * touch
 376  */
 377
 378 .djs-shape,
 379 .djs-connection {
 380   touch-action: none;
 381 }
 382
 383 .djs-bendpoint {
 384   display: none;
 385 }
 386
 387 /**
 388  * bendpoints
 389  */
 390 .djs-bendpoint .djs-visual {
 391   pointer-events: none;
 392   fill: rgba(255, 255, 121, 0.8);
 393   stroke-width: 1px;
 394   stroke-opacity: 0.5;
 395   stroke: black;
 396 }
 397
 398 .djs-bendpoint:hover,
 399 .djs-bendpoints.hover .djs-bendpoint,
 400 .djs-bendpoints.selected .djs-bendpoint {
 401   display: block;
 402 }
 403
 404 .djs-bendpoints:not(.hover) .floating {
 405   display: none;
 406 }
 407
 408 .djs-bendpoint:hover .djs-visual,
 409 .djs-bendpoint.floating .djs-visual {
 410   fill: yellow;
 411 }
 412
 413 .djs-bendpoint.floating .djs-hit {
 414   pointer-events: none;
 415 }
 416
 417 .djs-bendpoint .djs-hit {
 418   pointer-events: all;
 419   fill: none;
 420 }
 421
 422 .djs-updating,
 423 .djs-updating > * {
 424   pointer-events: none !important;
 425 }
 426
 427 .djs-updating .djs-context-pad,
 428 .djs-updating .djs-outline,
 429 .djs-updating .djs-bendpoint,
 430 .connect-ok .djs-bendpoint,
 431 .connect-not-ok .djs-bendpoint,
 432 .drop-ok .djs-bendpoint,
 433 .drop-not-ok .djs-bendpoint {
 434   display: none !important;
 435 }
 436
 437 .djs-bendpoint.djs-dragging {
 438   display: block;
 439   opacity: 1.0;
 440 }
 441
 442 .djs-bendpoint.djs-dragging .djs-visual {
 443   fill: yellow;
 444 }
 445
 446
 447 /**
 448  * tooltips
 449  */
 450 .djs-tooltip-error {
 451   font-size: 11px;
 452   line-height: 18px;
 453   text-align: left;
 454
 455   padding: 5px;
 456
 457   opacity: 0.7;
 458 }
 459
 460 .djs-tooltip-error > * {
 461   width: 160px;
 462
 463   background: rgb(252, 236, 240);
 464   color: rgb(158, 76, 76);
 465   padding: 3px 7px;
 466   box-shadow: 0 1px 3px rgba(0,0,0, 0.2);
 467   border-radius: 5px;
 468   border-left: solid 5px rgb(174, 73, 73);
 469 }
 470
 471 .djs-tooltip-error:hover {
 472   opacity: 1;
 473 }