azkaban-svg.less

svg {
  .edge {
    stroke: #777;
    stroke-width: 2;
    &:hover {
      stroke: #009FC9;
      stroke-width: 4;
    }
  }

  .node {
    &.disabled {
      opacity: 0.3;
    }
    .backboard {
      fill: #FFF;
      opacity: 0.05;
    }
    circle {
      fill: #888;
      stroke: #777;
      stroke-width: 2;
    }

    &:hover {
      cursor: pointer;
      .backboard {
        opacity: 0.7;
      }
      circle {
        stroke: #009FC9;
      }
      text {
        fill: #009FC9;
      }
    }
  }

  .selected {
    .backboard {
      opacity: 0.4;
    }

    text {
      fill: #338AB0;
    }

    circle {
      stroke: #009FC9;
      stroke-width: 4;
    }
  }

  .READY circle {
    fill: #CCC;
  }

  .RUNNING circle {
    fill: #009FC9;
  }

  .QUEUED circle {
    opacity: 0.5;
    fill: #009FC9;
  }

  .FAILED circle {
    fill: #CC0000;
  }

  .KILLED circle {
    fill: #CC0000;
  }

  .SUCCEEDED circle {
    fill: #00CC33;
  }

  .DISABLED circle {
    opacity: 0.3;
  }

  .SKIPPED circle {
    opacity: 0.3;
  }

  // Used for charts.
  circle {
    &.READY {
      stroke: #CCC;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.RUNNING {
      stroke: #009FC9;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.FAILED {
      stroke: #CC0000;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.KILLED {
      stroke: #CC0000;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.SUCCEEDED {
      stroke: #00CC33;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.DISABLED {
      stroke: #CCC;
      opacity: 0.3;
      stroke-width: 2px;
      fill: #FFF;
    }

    &.SKIPPED {
      stroke: #CCC;
      opacity: 0.3;
      stroke-width: 2px;
      fill: #FFF;
    }
  }
}