azkaban-graph.less

.nodebox {
  text {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  image {
    pointer-events: none;
  }

  > .border:hover {
    fill-opacity: 0.7;
  }

  > .flowborder:hover {
    stroke-opacity: 0.7;
  }
}

/* Nodes */
.node {
  &:hover {
    cursor: pointer;
  }

  &.selected > .nodebox .border {
    stroke-width: 3;
    stroke: #39b3d7;
  }

  &.selected > .nodebox .flowborder {
    stroke-width: 3;
    fill: #D9EDFF;
  }
}

.border {
  stroke-width: 1;
}

.flownode .nodebox .flowborder {
  stroke-width: 1.25;
  fill: #FFF;
  fill-opacity: 0.8;
}

.READY > g > rect {
  fill: #DDD;
  stroke: #CCC;
}

.READY > g > text {
  fill: #000;
}

.RUNNING > g > rect {
  fill: #39b3d7;
  stroke: #3997bd;
}

.RUNNING > g > text {
  fill: #FFF;
}

.SUCCEEDED > g > rect {
  fill: #5cb85c;
  stroke: #60a060;
}

.SUCCEEDED > g > text {
  fill: #FFF;
}

.FAILED > g > rect {
  fill: #d2322d;
  stroke: #b43128;
}

.FAILED > g > text {
  fill: #FFF;
}

.KILLED > g > rect {
  fill: #d2322d;
  stroke: #b43128;
}

.KILLED > g > text {
  fill: #FFF;
}

.KILLING > g > rect {
  fill: #FF9999;
  stroke: #d78484;
}

.KILLING > g > text {
  fill: #FFF;
}

.CANCELLED > g > rect {
  fill: #FF9999;
  stroke: #d78484;
}

.CANCELLED > g > text {
  fill: #FFF;
}

.FAILED_SUCCEEDED > g > rect {
  fill: #FF9999;
  stroke: #d78484;
}

.FAILED_SUCCEEDED > g > text {
  fill: #FFF;
}

.FAILED_FINISHING > g > rect {
  fill: #ed9c28;
  stroke: #d78484;
}

.FAILED_FINISHING > g > text {
  fill: #FFF;
}

.DISABLED > g > rect {
  fill: #DDD;
  stroke: #CCC;
}

.DISABLED > g > rect {
  fill: #DDD;
  stroke: #CCC;
}

.nodeDisabled {
  opacity: 0.25;
}

.SKIPPED > g > rect {
  fill: #DDD;
  stroke: #CCC;
}

.DISABLED {
  opacity: 0.25;
}

.SKIPPED {
  opacity: 0.25;
}

.QUEUED > g > rect {
  fill: #39b3d7;
  stroke: #3997bd;
}

.QUEUED > g > text {
  fill: #FFF;
}

.QUEUED {
  opacity: 0.5;
}

/* Edges */
.edge {
  stroke: #CCC;
  stroke-width: 1.5;

  &:hover {
    stroke: #009FC9;
    stroke-width: 1.5;
  }
}