dependency-cruiser
Version:
Validate and visualize dependencies. With your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
109 lines (108 loc) • 2.58 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>dependency graph</title>
<style>
.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: fuchsia;
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;
}
}
</style>
</head>
<body>
<button id="button_help">?</button>
<div id="hints" class="hint" style="display: none">
<button id="close-hints">x</button>
<span id="hint-text"></span>
<ul>
<li><b>Hover</b> - highlight</li>
<li><b>Right-click</b> - pin highlight</li>
<li><b>ESC</b> - clear</li>
</ul>
</div>