five-bells-visualization/public/components/five-bells-viz-graph/five-bells-viz-graph.css

Tool to visualize Five Bells payments

/*
// '#60BD68', // green
// '#FAA43A', // orange
// '#5DA5DA', // blue
// '#F17CB0', // pink
// '#B2912F', // brown
// '#B276B2', // purple
// '#DECF3F', // yellow
// '#F15854', // red
// '#4D4D4D'  // gray
*/

.node {
  fill: #666;
  stroke: none;
}

.node.type-ledger {
  opacity: 0.7;
}

.node.type-ledger:nth-child(4n) {
  fill: #bbceb0;
}

.node.type-ledger:nth-child(4n+1) {
  fill: #8f6a61;
}

.node.type-ledger:nth-child(4n+2) {
  fill: #649990;
}

.node.type-ledger:nth-child(4n+3) {
  fill: #516667;
}

/*.node.type-five-bells-recipient {
  fill: #FAA43A;
}

.node.type-simple-example {
  fill: #B276B2;
}*/

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1px;
}

.link.type-connector {
  stroke: #fff;
  stroke-width: 1px;
}

.node.fixed {
  stroke: #333;
  stroke-width: 2px;
}

.message.type-ping {
  fill: #60BD68;
}

.message.type-pong {
  fill: #5DA5DA;
}

.event {
}

.event rect {
  fill: #ccc;
}

.event.state-prepared rect {
  fill: #fdb34d;
}

.event.state-executed rect {
  fill: #42b186;
}

.event.state-rejected rect {
  fill: #F15854;
}

.event text {
  text-anchor: middle;
  font-family: 'Open Sans', sans-serif;
  alignment-baseline: middle;
  fill: #fff;
  font-size: 0.9rem;
}

.highlight-mode .node {
  opacity: 0.2;
}

.highlight-mode .node.highlighted {
  opacity: 1;
}

.highlight-mode .link {
  opacity: 0.2;
}

.highlight-mode .link.highlighted {
  opacity: 1;
}