src/main/resources/META-INF/resources/designer/modeler/dist/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:relative;
 229   left: 20px;
 230   top: 20px;
 231 }
 232
 233 .djs-palette:not(.open) {
 234   overflow: hidden;
 235 }
 236
 237 .djs-palette .entry,
 238 .djs-palette .djs-palette-toggle {
 239   width: 46px;
 240   height: 246px;
 241   /* line-height: 46px; */
 242 }
 243
 244 .djs-palette .separator {
 245   margin: 3px 5px 5px 5px;
 246   border: solid 1px #DDD;
 247   border-radius: 1px;
 248 };
 249
 250 .djs-palette .entry:before {
 251   vertical-align: middle;
 252 }
 253
 254 .djs-palette .djs-palette-toggle {
 255   cursor: pointer;
 256 }
 257
 258 .djs-palette .entry,
 259 .djs-palette .djs-palette-toggle {
 260   color: #333;
 261   font-size: 30px;
 262
 263   text-align: center;
 264 }
 265
 266 .djs-palette.open .djs-palette-toggle {
 267   height: 10px;
 268 }
 269
 270 .djs-palette:not(.open) .djs-palette-entries {
 271   display: none;
 272 }
 273
 274 .djs-palette .djs-palette-toggle:hover {
 275   /*background: #666;*/
 276 }
 277
 278 .djs-palette .entry:hover {
 279   color: rgb(255, 116, 0);
 280 }
 281
 282 /**
 283  * context-pad
 284  */
 285 .djs-overlay-context-pad {
 286   width: 72px;
 287 }
 288
 289 .djs-context-pad {
 290   position: absolute;
 291   display: none;
 292   pointer-events: none;
 293 }
 294
 295 .djs-context-pad .entry {
 296   width: 22px;
 297   height: 22px;
 298   text-align: center;
 299   display: inline-block;
 300   font-size: 22px;
 301   margin: 0 2px 2px 0;
 302
 303   border-radius: 3px;
 304
 305   cursor: default;
 306
 307   background-color: rgba(255,255,255, 0.85);
 308   box-shadow: 0 0 2px 1px rgba(255,255,255, 0.85);
 309
 310   pointer-events: all;
 311 }
 312
 313 .djs-context-pad .entry:before {
 314   vertical-align: top;
 315 }
 316
 317 .djs-context-pad .entry:hover {
 318   background: rgb(255, 252, 176);
 319 }
 320
 321 .djs-context-pad.open {
 322   display: block;
 323 }
 324
 325 .djs-popup-entry {
 326   font-size: 20px;
 327   line-height: 20px;
 328   padding: 2px 10px 2px 5px;
 329   background-color: rgba(255,255,255, 0.85);
 330   white-space: nowrap;
 331 }
 332
 333 .djs-popup-entry:hover {
 334   background: rgb(255, 252, 176);
 335 }
 336
 337 .djs-popup-entry > span {
 338   font-size: 14px;
 339   margin-left: 5px;
 340
 341   vertical-align: middle;
 342 }
 343
 344 .djs-popup-entry:before {
 345   vertical-align: middle;
 346 }
 347
 348 /**
 349  * popup / palette styles
 350  */
 351 .djs-popup, .djs-palette {
 352   background: #FAFAFA;
 353   border: solid 1px #CCC;
 354   border-radius: 2px;
 355   box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 356 }
 357
 358 /**
 359  * touch
 360  */
 361
 362 .djs-shape,
 363 .djs-connection {
 364   touch-action: none;
 365 }
 366
 367 .djs-bendpoint {
 368   display: none;
 369 }
 370
 371 /**
 372  * bendpoints
 373  */
 374 .djs-bendpoint .djs-visual {
 375   pointer-events: none;
 376   fill: rgba(255, 255, 121, 0.8);
 377   stroke-width: 1px;
 378   stroke-opacity: 0.5;
 379   stroke: black;
 380 }
 381
 382 .djs-bendpoint:hover,
 383 .djs-bendpoints.hover .djs-bendpoint,
 384 .djs-bendpoints.selected .djs-bendpoint {
 385   display: block;
 386 }
 387
 388 .djs-bendpoints:not(.hover) .floating {
 389   display: none;
 390 }
 391
 392 .djs-bendpoint:hover .djs-visual,
 393 .djs-bendpoint.floating .djs-visual {
 394   fill: yellow;
 395 }
 396
 397 .djs-bendpoint.floating .djs-hit {
 398   pointer-events: none;
 399 }
 400
 401 .djs-bendpoint .djs-hit {
 402   pointer-events: all;
 403   fill: none;
 404 }
 405
 406 .djs-updating,
 407 .djs-updating > * {
 408   pointer-events: none !important;
 409 }
 410
 411 .djs-updating .djs-context-pad,
 412 .djs-updating .djs-outline,
 413 .djs-updating .djs-bendpoint,
 414 .connect-ok .djs-bendpoint,
 415 .connect-not-ok .djs-bendpoint,
 416 .drop-ok .djs-bendpoint,
 417 .drop-not-ok .djs-bendpoint {
 418   display: none !important;
 419 }
 420 .djs-outline-no-property-saved {
 421         stroke:red;
 422         stroke-width:5;
 423 }
 424 .djs-bendpoint.djs-dragging {
 425   display: block;
 426   opacity: 1.0;
 427 }
 428
 429 .djs-bendpoint.djs-dragging .djs-visual {
 430   fill: yellow;
 431 }
 432
 433
 434 /**
 435  * tooltips
 436  */
 437 .djs-tooltip-error {
 438   font-size: 11px;
 439   line-height: 18px;
 440   text-align: left;
 441
 442   padding: 5px;
 443
 444   opacity: 0.7;
 445 }
 446
 447 .djs-tooltip-error > * {
 448   width: 160px;
 449
 450   background: rgb(252, 236, 240);
 451   color: rgb(158, 76, 76);
 452   padding: 3px 7px;
 453   box-shadow: 0 1px 3px rgba(0,0,0, 0.2);
 454   border-radius: 5px;
 455   border-left: solid 5px rgb(174, 73, 73);
 456 }
 457
 458 .djs-tooltip-error:hover {
 459   opacity: 1;
 460 }