dependency-cruiser/src/report/dot-webpage/svg-in-html-snippets/style.css

Validate and visualize dependencies. With your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

.node:active path,
.node:hover path,
.node.current path,
.node:active polygon,
.node:hover polygon,
.node.current polygon {
	stroke: fuchsia;
	stroke-width: 2;
}

.edge:active path,
.edge:hover path,
.edge.current path,
.edge:active ellipse,
.edge:hover ellipse,
.edge.current ellipse {
	stroke: url(#edgeGradient);
	stroke-width: 3;
	stroke-opacity: 1;
}

.edge:active polygon,
.edge:hover polygon,
.edge.current polygon {
	stroke: fuchsia;
	stroke-width: 3;
	fill: fuchsia;
	stroke-opacity: 1;
	fill-opacity: 1;
}

.edge:active text,
.edge:hover text {
	fill: fuchsia;
}

.cluster path {
	stroke-width: 3;
}

.cluster:active path,
.cluster:hover path {
	fill: #ffff0011;
}

div.hint {
	background-color: #000000aa;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 1rem;
	position: fixed;
	top: calc(50% - 4em);
	right: calc(50% - 10em);
	border: none;
	padding: 1em 3em 1em 1em;
}

.hint button {
	position: absolute;
	font-weight: bolder;
	right: 0.6em;
	top: 0.6em;
	color: inherit;
	background-color: inherit;
	border: 1px solid currentColor;
	border-radius: 1em;
	margin-left: 0.6em;
}

.hint a {
	color: inherit;
}

#button_help {
	color: white;
	background-color: #00000011;
	border-radius: 1em;
	position: fixed;
	top: 1em;
	right: 1em;
	font-size: 24pt;
	font-weight: bolder;
	width: 2em;
	height: 2em;
	border: none;
}

#button_help:hover {
	cursor: pointer;
	background-color: #00000077;
}

@media print {
	#button_help {
		display: none;
	}

	div.hint {
		display: none;
	}
}