SCxmlView.css

@-webkit-keyframes exit{
	from{
		outline: 0 solid rgba(255,0,0,0.5);
	}
	to{
		outline: 3pt solid rgba(255,0,0,0.5);
	}
}
@-webkit-keyframes enter{
	from{
		outline: 0 solid rgba(0,255,0,0.7);
	}
	to{
		outline: 3pt solid rgba(0,255,0,0.7);
	}
}
@-webkit-keyframes burn{
	from{
		line-height: 11pt;
		text-shadow: 0px 0px 1px #8ee9ff;
	}
	15%{
		color: rgba(255,238,76,1);
		text-shadow: 0px 0px 3px #ffb33f;
	}
	50%{
		color: rgba(0,0,0,0);
		text-shadow: 0px 0px 8px rgba(177,51,0,0.64);
	}
	85%{
		line-height: 2pt;
		color: rgba(0,0,0,0);
		opacity: 1.0;
		text-shadow: 0px -7px 20px rgba(0,0,0,0.42);
	}
	to{
		line-height: 0;
		color: rgba(0,0,0,0);
		opacity: 0;
		text-shadow: 0px -10px 25px rgba(0,0,0,0.42);
	}
}

.SCxmlDebug{
	width: 100%;
	line-height: 12pt;
}

.SCxmlDebug .sc{
	min-height: 4em;
}
.SCxmlDebug td{
	vertical-align: top;
	border: 0 none;
	overflow-x: hidden;
}
.SCxmlDebug td+td{ border-left: 1px solid grey; }
.SCxmlDebug td+td+td{
	width: auto;
	border-left: 0 none;
	overflow-x: visible;
}
.SCxmlDebug td h2{
	font-size: 12pt;
	margin: 0;
	font-weight: normal;
	text-align: center;
}
.SCxmlDebug input[type=submit], .SCxmlDebug label{
	font-size: 12pt;
	margin: 0 4pt;
}

/* SCXML element rendering */
.final, .history, .parallel, .state{
	background-color: white;
	float: left;
	border: 1px solid grey;
	padding: 4pt;
	margin: 6pt;
	box-shadow: 0px 1pt 3pt grey;
	min-width: 3em;
	width: auto;
	transition: background-color 0.7s ease-out 0;
	outline: 0 solid white;
}
invoke{
	color: #ce45d0;
	display: block;
	margin: 0;
}
.sc h4{
	display: inline;
	font-size: 10pt;
	margin: 0;
}

.transition{
	clear: left;
	opacity: 0.5;
	display: block;
	border-bottom: 2px solid #0f3a98;
}
.transition:hover, .transition.on{
	border-color: #179fff;
	background: linear-gradient(rgba(255,255,255,0) 30%, #179fff 100%);
}
.transition.enabled{
	border-color: green;
	background: linear-gradient(rgba(255,255,255,0) 30%, green 100%);
}
.transition.enabled:hover, .transition.on.enabled{
	border-color: lime;
	background: linear-gradient(rgba(255,255,255,0) 30%, lime 100%);
}
.transition code + * {
	margin-left: 4pt;
}
.transition > summary h4{
	font-weight: normal;
}
.transition > summary h4:before{
	content: "on ";
	color:#708c61;
}
.transition span{
	font-size: 10pt;
}
.transition code:before{
	content: "if ";
	color: #7d0000;
}
.transition span:before, .transition span+code:before{
	content: "to ";
	color: #00497e;
}
.sc .empty{
	font-style: italic;
}
.transition > summary h4.empty:before{
	content: "eventless";
}
.transition code.empty:before{
	content: "always";
}
.transition span.empty:before, .transition span+code.empty:before{
	content: "targetless";
}
details.final{ border-color: red; }
details.parallel{
	border: 3px double grey;
	padding: 2pt;
}
details.active{
	background-color: rgba(200,255,0,0.32);
	-webkit-animation: enter 0.3s linear 0 3 alternate;
}
details.active > .transition{
	opacity: 1;
}
details.exited{
	-webkit-animation: exit 0.3s linear 0 3 alternate;
}
details.enabled{
	border-color: green;
}

/* events */
.SCxmlDebug ol{
	padding-left: 1.4em;
}

.SCxmlDebug li.error{
	color: red;
}
.SCxmlDebug li.burn{
	-webkit-animation: burn 1.3s linear;
	display: block; 
}

/* .transition arrows */
svg{
	position: absolute;
	pointer-events: none;
}
#arrow{ fill: #0f3a98; }
#arrowOn{ fill: #179fff; }
#arrowOnEnabled{ fill: lime; }
#arrowIni{ fill: #ff14e3; }

scxml path{
	pointer-events: visibleStroke;
	fill: none;
	stroke: #0f3a98;
	stroke-width: 2;
	marker-end: url(#arrow);
}
scxml path:hover, scxml path.on{
	marker-end: url(#arrowOn);
	stroke: #179fff;
}
scxml path.enabled{
	stroke: green;
}
scxml path.enabled:hover, scxml path.on.enabled{
	marker-end: url(#arrowOnEnabled);
	stroke: lime;
}

scxml path.ini, scxml path.ini:hover{
	pointer-events: visibleStroke;
	fill: none;
	stroke: #ff14e3;
	stroke-width: 2;
	marker-end: url(#arrowIni);
}